I am trying to populate a list of images dynamically using javascript. I have the following code, but it is not working. If you see any errors, or know of a better way of doing this, any help will be appreciated.
code is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function generateCarousel(baseval, num_images)
{
var list_node = document.getElementById("carousel");
list_node.innerHtml(''); // clear the previous contents
for (var i = 0; i < num_images; i++)
{
var img = document.createElement("img");
img.src = baseval + ((i<9)?0+i:i) + ".jpg";
list_node.appendChild(img);
}
}
</script>
<style type="text/css">
#carousel {
width: 700px;
height: 450px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="Container">
<div id="Content">
<div id="carousel">
<img src="images/placeholder0.jpg" height="450" />
<img src="images/placeholder1.jpg" height="450" />
</div>
<a onclick="generateCarousel('images/set1/', 10); return false;">set 1</a>
<a onclick="generateCarousel('images/set2/', 12); return false;">set 2</a>
</div>
</div>
</body>
</html>
“innerHTML” is not a function.