简体   繁体   English

在JavaScript中添加和删除多个元素

[英]Adding and removing multiple elements in javascript

I am trying to populate a list of images dynamically using javascript. 我正在尝试使用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; innerHTML是属性,而不是函数; and innerHtml doesn't exist, unless something you're using is defining it. 并且innerHtml不存在,除非您正在使用的东西对其进行定义。 Most browsers' javascript console would have alerted you to this. 大多数浏览器的JavaScript控制台都会提醒您这一点。

Normally, script execution stops when an uncaught exception occurs. 通常,当发生未捕获的异常时,脚本执行会停止。 So the script stopped there. 因此脚本停止在那里。

“ innerHTML”不是功能。

list_node.innerHTML = '';

As discussed by other's, you need to change the line where you set the inner HTML to 正如其他人所讨论的,您需要更改将内部HTML设置为的行。

`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. 另外,您可能希望将以下内容添加到CSS中,以获取所有图像以自动填充轮播的高度。

#carousel img { height: 100%; }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM