Индекс getElementsByClassName не определен, но не весь объект - PullRequest
Новая
       9

Индекс getElementsByClassName не определен, но не весь объект

0 голосов
/ 11 февраля 2019

Я пытаюсь зациклить элементы с определенным классом и прикрепить к ним идентификатор. 

var items = document.getElementsByClassName("item");
for(var i = 0; i < items.length; i++)
{
    items[i].id = "item_" + i;
}

console.log(items);

Если я запускаю это, я получаю ошибку Cannot set property 'id' of undefined

Однако console.log(items) возвращает мне правильную коллекцию предметов: 

HTMLCollection []
    0: div.item
    1: div.item
    length: 2
    __proto__: HTMLCollection

Но как только я пытаюсь получить индекс console.log(testimonials[0]), это undefined.

HTML: 

<div class="slider">
   <div class="item">
       Item 1
   </div>
</div>
<div class="slider">
   <div class="item">
       Item 2
   </div>
</div>

Ответы [ 4 ]

0 голосов
/ 11 февраля 2019

С vanilla js всегда выполняйте операции, связанные с DOM, после того, как DOM будет готов к использованию.А также перед тем, как получить доступ к любому элементу DOM / работать с ним, убедитесь, что он не имеет значения NULL (не равен 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.log(items);
}
0 голосов
/ 11 февраля 2019

Возможно, проблема в том, что ваш скрипт запущен до того, как DOM будет полностью готов.

Чтобы решить эту проблему, вы можете поместить свой код внизу body .

ИЛИ:

Попробуйте обернуть ваш код в 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.log(items);
  });
</script>


<div class="slider">
   <div class="item">
       Item 1
   </div>
</div>
<div class="slider">
   <div class="item">
       Item 2
   </div>
</div>
0 голосов
/ 11 февраля 2019

Проверьте этот код: 

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

Надеюсь, это поможет вам.

0 голосов
/ 11 февраля 2019

Попробуйте использовать

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