Adding and removing multiple elements in javascript
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>
list_node.innerHtml('');
innerHTML is a property, not a function; and innerHtml doesn't exist, unless something you're using is defining it. Most browsers' javascript console would have alerted you to this.
Normally, script execution stops when an uncaught exception occurs. So the script stopped there.
"innerHTML" is not a function.
list_node.innerHTML = '';
As discussed by other's, you need to change the line where you set the inner HTML to
`list_node.innerHTML = '';`
Noting that it is an attribute, not a function, and that case matters.
Also, you may want to add the following to your CSS to get all of the images to fill the height of the carousel automatically.
#carousel img { height: 100%; }
加载中,请稍侯......
精彩评论