0

I'm trying to increase the decrease the number in the span, when I click - number -1, + number +1. The below is the function I created, one is not working. When I click the - or +, the error shows me that the innerText in (Number(count_i[k].innerText)) and count_i[k].innerText are not work. the error Uncaught TypeError: Cannot set property 'innerText' of undefined. I use that in the same file above, also in a for loop and work, why this one is not working? And I did the working one, why that one is working?

Not Working code:

   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);
    }
  }

}

Working code:

   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">&nbsp-&nbsp</span><span style="margin:0px 10px" class="count_item">5</span><span class="p_item" style="font-weight: 500;">&nbsp+&nbsp</span></div>
Lee Alex
  • 171
  • 2
  • 3
  • 13
  • Have you checked `count_i` exist and it has multiple DOM elements ? – Kaung Khant Zaw Nov 27 '20 at 08:19
  • Can you show us the HTML you're using in conjunction with this? – Gary Nov 27 '20 at 08:20
  • @KaungKhantZaw Yes, I used the 'count_i' before, I upload my code. – Lee Alex Nov 27 '20 at 08:29
  • @Gary Sure, I upload it. – Lee Alex Nov 27 '20 at 08:29
  • 2
    There's no HTML element with **show-cost** id. – AbsoluteBeginner Nov 27 '20 at 09:06
  • @AbsoluteBeginner that one is work，I didn't show the whole HTML. the innerText in count_i in getAmount is good， but doesn't work in last two function in for loop – Lee Alex Nov 27 '20 at 09:39
  • Does this answer your question? [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) – 3limin4t0r Nov 28 '20 at 02:58
  • The problem is that you use `var`, use `let` instead. With `var` all callbacks share the same `k`, which is `d_btn.length` at the time the callback is triggered. With `let` all callbacks receive their own copy of `k`. – 3limin4t0r Nov 28 '20 at 03:02
  • Once you use `document.getElementById('test234').textContent` you have a *string*. You can *not* increment a string because that is a *numeric function*. You have to change it to `Number(document.getElementById('test234').textContent)`. The `textContent` is valid for both read and write. Use `typeof my_object` to determine if what you have is a string or a number type. – John Nov 28 '20 at 04:24

1 Answers1

0

There is only one p_btn and d_btn and because of you are looping

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

In this case when k reaches to 1, p_btn[1] doesn't exist anymore and it's showing undefined. You don't need looping for both buttons and also I recommend you to use querySelector instead of getElementsByClassName if you only want to select one element in document.

Kaung Khant Zaw
  • 1,508
  • 3
  • 19
  • 31