Adding and removing multiple elements in javascript

StackOverflow https://stackoverflow.com/questions/2214619

  •  19-09-2019
  •  | 
  •  

Question

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>
Was it helpful?

Solution

"innerHTML" is not a function.

list_node.innerHTML = '';

OTHER TIPS

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.

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%; }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top