Добавление и удаление нескольких элементов в JavaScript - PullRequest
Новая
       24

Добавление и удаление нескольких элементов в JavaScript

1 голос
/ 06 февраля 2010

Я пытаюсь заполнить список изображений динамически, используя 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>

Ответы [ 3 ]

3 голосов
/ 06 февраля 2010

list_node.innerHtml('');

innerHTML - это свойство, а не функция; и innerHtml не существует, если что-то, что вы используете, не определяет это. Консоль javascript большинства браузеров предупредила бы вас об этом.

Обычно выполнение скрипта останавливается, когда возникает необработанное исключение. Таким образом, сценарий остановился на этом.

2 голосов
/ 06 февраля 2010

«innerHTML» не является функцией. 

list_node.innerHTML = '';
0 голосов
/ 06 февраля 2010

Как уже говорилось, вам нужно изменить строку, в которой вы устанавливаете внутренний HTML, на 

`list_node.innerHTML = '';`

Отмечая, что это атрибут, а не функция, и этот случай имеет значение.

Кроме того, вы можете добавить следующее в свой CSS, чтобы все изображения автоматически заполняли высоту карусели. 

#carousel img { height: 100%; }
...