Adding and removing multiple elements in javascript

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>

Suggestion: whenever you post a question about something that is "not working", it is extremely helpful if you describe exactly what does happen and what you expect to happen. Are there errors? Exceptions? Does something happen but not the right thing? If it's not right, in what way is it not right? We can't read your mind and we can't see your screen. — Pointy
– Pointy, Commented Feb 6, 2010 at 20:38

Anonymous · Accepted Answer · 2010-02-06 20:39:12Z

3

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.

answered Feb 6, 2010 at 20:39

Anonymous

50.6k1 gold badge27 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pointy · Accepted Answer · 2010-02-06 20:41:19Z

2

"innerHTML" is not a function.

list_node.innerHTML = '';

answered Feb 6, 2010 at 20:41

Pointy

415k62 gold badges600 silver badges631 bronze badges

Comments

Justin Johnson · Accepted Answer · 2010-02-06 20:48:10Z

0

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%; }

answered Feb 6, 2010 at 20:48

Justin Johnson

31.4k7 gold badges67 silver badges89 bronze badges

Collectives™ on Stack Overflow

Adding and removing multiple elements in javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related