Question

我正在尝试使用javascript动态填充图像列表。我有以下代码，但它无法正常工作。如果您发现任何错误，或者知道更好的方法，我们将不胜感激。

代码如下：

<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>

Answer 1

list_node.innerHtml('');

innerHTML是一个属性，而不是一个函数;并且innerHtml不存在，除非您正在使用的是定义它。大多数浏览器的javascript控制台会提醒你这个。

通常，当发生未捕获的异常时，脚本执行会停止。所以脚本停在那里。

Answer 2

“innerHTML”不是一个函数。

list_node.innerHTML = '';

Answer 3

正如其他人所讨论的，您需要将设置内部HTML的行更改为

`list_node.innerHTML = '';`

注意到它是属性，而不是函数，并且这种情况很重要。

此外，您可能希望将以下内容添加到CSS中，以使所有图像自动填充轮播的高度。

#carousel img { height: 100%; }

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

3 个答案: