Cannot set property 'onclick' of undefined - code works, but annoing error

Question

It shows this error in the console, but the code is working:

Uncaught TypeError: Cannot set property 'onclick' of undefined

How to fix this error?

var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i <= buttonsCount; i += 1) {
  buttons[i].onclick = function(e) {
    if (this.id == "plus") {
      var pret_unitar_euro = $(this).closest("tr").find("input[name='pret_unitar_euro']").val($(this).closest("tr").find("input[name='input_value']").val() * $(this).closest("tr").find("input[name='pret_unitar_euro_h']").val());
      var pret_unitar_lei = $(this).closest("tr").find("input[name='pret_unitar_lei']").val($(this).closest("tr").find("input[name='input_value']").val() * $(this).closest("tr").find("input[name='pret_unitar_lei_h']").val());
      var pret_total_euro = $(this).closest("tr").find("input[name='pret_total_euro']").val($(this).closest("tr").find("input[name='input_value']").val() * $(this).closest("tr").find("input[name='pret_total_euro_h']").val());
      var pret_total_lei = $(this).closest("tr").find("input[name='pret_total_lei']").val($(this).closest("tr").find("input[name='input_value']").val() * $(this).closest("tr").find("input[name='pret_total_lei_h']").val());
    } else if (this.id == "minus") {
      var pret_unitar_euro = $(this).closest("tr").find("input[name='pret_unitar_euro']").val($(this).closest("tr").find("input[name='pret_unitar_euro_h']").val() * $(this).closest("tr").find("input[name='input_value']").val());
      var pret_unitar_lei = $(this).closest("tr").find("input[name='pret_unitar_lei']").val($(this).closest("tr").find("input[name='pret_unitar_lei_h']").val() * $(this).closest("tr").find("input[name='input_value']").val());
      var pret_total_euro = $(this).closest("tr").find("input[name='pret_total_euro']").val($(this).closest("tr").find("input[name='pret_total_euro_h']").val() * $(this).closest("tr").find("input[name='input_value']").val());
      var pret_total_lei = $(this).closest("tr").find("input[name='pret_total_lei']").val($(this).closest("tr").find("input[name='pret_total_lei_h']").val() * $(this).closest("tr").find("input[name='input_value']").val());

    }
  };
}

<button type="button" class="minus" id="minus">-</button>
<button type="button" class="plus" id="plus">+</button>

In your html file, are your button tags before your script tags ? Your script tag must be after your button been declared in your DOM — Stéphane Ammar
– Stéphane Ammar, Commented Nov 23, 2017 at 13:17
You should really store the selected elements in a variable. You could cut down the number of DOM accesses you're making by around 50% — Rory McCrossan
– Rory McCrossan, Commented Nov 23, 2017 at 13:18

Satpal · Accepted Answer · 2017-11-23 13:20:17Z

4

Your condition is not correct. You are getting the error on last iteration as buttons[i] is undefined.

Use

for (var i = 0; i < buttonsCount; i += 1) {
}

instead of

for (var i = 0; i <= buttonsCount; i += 1) {
}

As you are using jquery, it can be used to attach event handler, then for loop will not be required.

$("button").on('click', function(e) {
  //Your code
});

edited Nov 23, 2017 at 13:20

answered Nov 23, 2017 at 13:17

Satpal

133k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matt Fletcher Over a year ago

Yep, this. If there are 5 buttons, the buttonsCount length will be 5, but it's trying to get buttons[5] which is the sixth button, and is non-existent.

Bogdan C Over a year ago

I need a for loop because the buttons are in a php while loop.

gurvinder372 · Accepted Answer · 2017-11-23 13:19:01Z

3

How to fix this error?

You need to fix the condition in your for loop as

for (var i = 0; i < buttonsCount; i += 1) { //using < instead of <=

since when i becomes equal to buttonCount, then buttons[i] becomes undefined since you are trying to access an item from array which array doesn't have.

answered Nov 23, 2017 at 13:19

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

1 Comment

Bogdan C Over a year ago

Thank you for your explanation. I understood.

Collectives™ on Stack Overflow

Cannot set property 'onclick' of undefined - code works, but annoing error

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related