Не удается прочитать свойство 'textContent' неопределенного значения в JavaScript

#javascript

Вопрос:

В чем проблема? Я объявил переменную n

 var n = 0;

while (true) {
  var comment = document.getElementsByClassName('wall_reply_text')[n].textContent;
  
  if (comment.indexOf("публикации") == 0) {
    alert(comment);
  }
  
  n  ;
}

1. Почему вы так уверены, что в вашем HTML есть какие-либо элементы с этим именем класса? Вы не предоставили нам никакого HTML-кода для проверки, поэтому мы, конечно, не можем вам сказать.

2. Мы должны предположить, что либо такого элемента не существует, либо ваша функция выполняется до ее загрузки. Не могу сказать без дополнительной информации.

3. Кроме того, while(true) кажется странным способ зацикливания для этого варианта использования.

4. все элементы, включая wall_reply_text, существуют

5. да, но ваш n индекс быстро превысит самый высокий индекс в вашем массиве, и while(true) это означает, что ваш цикл никогда не прерывается без дополнительных обходных путей

Ответ №1:

наиболее вероятным объяснением является то wall_reply_text , что при выполнении этого кода отсутствуют элементы с именем класса, поэтому document.getElementsByClassName('wall_reply_text') возвращается пустой массив. когда вы пытаетесь получить доступ к индексу 0 в этом пустом массиве, вы получаете undefined , и, следовательно, ошибку при попытке доступа undefined.textContent .

1. если я укажу 0, или 1, или 2 вместо n, то ошибок не будет

2. в этом случае, вероятно, происходит то, что n становится очень большим, поскольку этот код выполняется в цикле while без условия прерывания.

Ответ №2:

Вам нужно выполнить разрыв, если элемента нет

 var n = 0, comment=""

while (true) {
  const div = document.getElementsByClassName('wall_reply_text')[n]
  if (div) comment = div.textContent;
  else break
  
  if (comment.indexOf("публикации") == 0) {
    console.log(n,comment);
  }
  
  n  ;
}

 <div class="wall_reply_text">1</div>
<div class="wall_reply_text">публикации</div>
<div class="wall_reply_text">3</div>
<div class="wall_reply_text">4</div>

Вот более элегантный способ

 [...document.querySelectorAll('.wall_reply_text')]
  .map(div => div.textContent)
  .forEach((comment,i) => {
    if (comment.indexOf("публикации") == 0) {
      console.log(i,comment);
    }
})

 <div class="wall_reply_text">1</div>
<div class="wall_reply_text">публикации</div>
<div class="wall_reply_text">3</div>
<div class="wall_reply_text">публикации</div>

Альтернатива, если вам нужен только один индекс

 const comments = [...document.querySelectorAll('.wall_reply_text')]
  .map(div => div.textContent)
console.log(comments.indexOf("публикации"))

 <div class="wall_reply_text">1</div>
<div class="wall_reply_text">публикации</div>
<div class="wall_reply_text">3</div>
<div class="wall_reply_text">4</div>