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

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

Решение

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

list_node.innerHTML = '';
Источник

list_node.innerHtml('');

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

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

Источник

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

`list_node.innerHTML = '';`

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

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

#carousel img { height: 100%; }
Источник
Другие вопросы по тегам