Индекс getElementsByClassName не определен, но не весь объект
Я пытаюсь перебрать элементы с определенным классом и прикрепить к ним идентификатор.
var items = document.getElementsByClassName("item");
for(var i = 0; i < items.length; i++)
{
items[i].id = "item_" + i;
}
console.info(items);
Если я запускаю это, я получаю ошибку Cannot set property 'id' of undefined
Однако console.info(items) возвращает мне правильный набор элементов:
HTMLCollection []
0: div.item
1: div.item
length: 2
__proto__: HTMLCollection
Но как только я пытаюсь получить индекс console.info(testimonials[0]), это undefined.
HTML:
<div class = "slider">
<div class = "item">
Item 1
</div>
</div>
<div class = "slider">
<div class = "item">
Item 2
</div>
</div>
я попробовал ваш код в скрипке, он работает как положено jsfiddle.net/gx0e26qw
Убедитесь, что ваш DOM отображается перед запуском JS.
@Mango D: проверь мой ответ, он тебе подойдет
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Попробуйте использовать
items[i].setAttribute("id", "item_" + i);
Для получения более подробной информации вы можете посетить документацию
https://www.w3schools.com/jsref/met_element_setattribute.asp
https://www.w3schools.com/jsref/met_element_getattribute.asp
Скрипка для этого:
https://jsfiddle.net/abdulrauf618/n14v58zs
Проблема может заключаться в том, что ваш скрипт запускается до того, как DOM будет полностью готов.
Чтобы решить эту проблему, вы можете поместить свой код внизу файла тело.
ИЛИ:
Попробуйте обернуть свой код DOMContentLoaded, это гарантирует, что ваш код будет выполнен, как только DOM будет полностью готов.
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var items = document.getElementsByClassName("item");
for(var i = 0; i < items.length; i++)
{
items[i].id = "item_" + i;
}
console.info(items);
});
</script>
<div class = "slider">
<div class = "item">
Item 1
</div>
</div>
<div class = "slider">
<div class = "item">
Item 2
</div>
</div>Это помогло, спасибо! Но по какой причине я не могу получить доступ к индексу items, хотя, как описано в моем вопросе, я могу получить console.info(items) и получить правильный вывод.
Проверьте этот код:
<html>
<head>
<script>
window.onload = function(e){
var allItem = document.getElementsByClassName("item");
for(var i = 0; i < allItem.length; i++)
{
document.getElementsByClassName("item")[i].setAttribute("id", "item_" + i);
}
};
</script>
</head>
<body>
<div class = "slider">
<div class = "item" id = "">
Item 1
</div>
</div>
<div class = "slider">
<div class = "item" id = "">
Item 2
</div>
</div>
</body>
</html>
Надеюсь, это поможет вам.
С vanilla js всегда выполняйте операции, связанные с DOM, после того, как DOM готов к использованию. А также перед доступом/работой с любым элементом DOM проверьте, что он не допускает значение NULL (не равен нулю). С помощью этих методов вы не увидите никаких ошибок с элементами DOM, потому что это безопасный способ манипулирования элементами DOM. В обычном цикле всегда кэшируйте array.length. Избегайте использования анонимной функции, она не рассчитана на будущее и не удобна для отладки. Также запишите все js в отдельный файл js.
HTML
<div class = "slider">
<div class = "item">
Item 1
</div>
</div>
<div class = "slider">
<div class = "item">
Item 2
</div>
</div>
JS
document.addEventListener("DOMContentLoaded", onDomReadyHandler);
function onDomReadyHandler(event) {
var items = document.getElementsByClassName('item');
var itemsLen = items.length;
for(var i = 0; i < itemsLen; i++) {
items[i].id = "item_" + i;
}
console.info(items);
}
пожалуйста, поделитесь своим html