Использование innerText в цикле for, и это не работает в javascript

#javascript

Вопрос:

Я пытаюсь увеличить уменьшение числа в диапазоне, когда я нажимаю — число -1, число 1. Ниже приведена функция, которую я создал, она не работает. Когда я нажимаю — или , ошибка показывает мне, что внутренний текст в (Number(count_i[k].innerText)) и count_i[k].innerText не работает. ошибка Uncaught TypeError: Cannot set property 'innerText' of undefined . Я использую это в том же файле выше, также в цикле for и work, почему этот не работает? И я сделал рабочий, почему он работает?

Не рабочий код:

    var unit_p = document.getElementsByClassName("unit_price");
   var count_i = document.getElementsByClassName("count_item");
   var p_btn = document.getElementsByClassName("p_item");
   for (var k = 0; k < p_btn.length; k  ) {p_btn[k].onclick = function() {
    var a = (Number(count_i[k].innerText));
    a  = 1;
    count_i[k].innerText = a;
    console.log(a);
  }
}

var d_btn = document.getElementsByClassName("d_item");
for (var k = 0; k < d_btn.length; k  ) {
  d_btn[k].onclick = function() {

    var a = (Number(count_i[k].innerText));
    if (a > 0) {
      a -= 1;
      count_i[k].innerText = a;
      console.log(a);
    }
  }

}

Рабочий код:

    var unit_p = document.getElementsByClassName("unit_price");
   var count_i = document.getElementsByClassName("count_item");
   var p_btn = document.getElementsByClassName("p_item");
  for (var i = 0; i< p_btn.length; i  ) {
    (function (i) {
      p_btn[i].onclick = function () {
        var a = parseInt(count_i[i].innerHTML);
          a;
        count_i[i].innerHTML = a;
        console.log(a);
        get_after_Amount();
      }
    })(i)

  }

  var d_btn = document.getElementsByClassName("d_item");
    for (var i = 0; i < p_btn.length; i  ) {
      (function (i) {
        d_btn[i].onclick = function () {
          var a = parseInt(count_i[i].innerHTML);
          if (a != 0) {
            --a;
            count_i[i].innerHTML = a;
          } else {
            count_i[i].innerHTML = 0;
          }
          get_after_Amount();
        }
        
      })(i)
     
    }

 <div class="col-3"><span style="font-weight: 500;" class="d_item">amp;nbsp-amp;nbsp</span><span style="margin:0px 10px" class="count_item">5</span><span class="p_item" style="font-weight: 500;">amp;nbsp amp;nbsp</span></div>

1. Вы проверили count_i exist и у него есть несколько элементов DOM?

2. Можете ли вы показать нам HTML, который вы используете в сочетании с этим?

3. @KaungKhantZaw Да, я использовал ‘count_i’ раньше, я загружал свой код.

4. @Gary Конечно, я загружаю его.

5. Нет элемента HTML с идентификатором show-cost .

Ответ №1:

Существует только один p_btn и d_btn и из-за того, что вы зацикливаетесь

 for (var k = 0; k < p_btn.length; k  ) { .. }

В этом случае, когда k достигает to 1 , p_btn[1] больше не существует, и это отображается undefined . Вам не нужен цикл для обеих кнопок, а также я рекомендую вам использовать querySelector вместо getElementsByClassName , если вы хотите выбрать только один элемент в документе.