Variable value won't increment by 1 in Javascript

Question

var countWrong = 0;
(Button1, Button3, Button4, Button5, Button6).addEventListener('click', () => {
    countWrong += 1;
});
console.log(countWrong)

I can not figure out what I'm doing wrong. When the buttons are clicked I want to increment 1 to countWrong.

RoToRa · Answer

There are two problems here:

(Button1, Button3, Button4, Button5, Button6).addEventListener

You can't call a method on multiple objects like that. I assume you want something like:

[Button1, Button3, Button4, Button5, Button6].forEach(b => 
  b.addEventListener('click', () => {
      countWrong += 1;
  })
);

EDIT: I assumed Button... where variables, but if they are IDs, you'll need to look them up first, maybe like this:

document.querySelectorAll("#Button1, #Button3, #Button4, #Button5, #Button6").forEach( ... )

Also console.log(countWrong) will always display 0, because the event handlers won't have been called yet.

userRUVX · Answer

You can do what you need with jquery

var countWrong = 0;
$('#Button1, #Button3, #Button4, #Button5, #Button6').on('click', () => {
    countWrong += 1;
    console.log(countWrong)
});

And the console.log() has to be inside your onclick function otherwise your log will only give you the initial value 0 once before any button was pressed

userKbdR · Answer

You have written the right code however you see the wrong results.
Because, you are printing the countWrong only once after initialising it.
So when you initialise for the first time, it's value will be zero and it prints it.
And when ou click the buttons, the value of that variable will be updated however you won't be able to see because the console.log present in outer code has already been executed ( but the value is updating ).

And your logic of binding the events for multiple ids is not as same as you wrote, change a bit.
try this :

var countWrong = 0;
['Button1', 'Button3', 'Button4', 'Button5', 'Button6'].forEach(function(e) {
    e.addEventListener('click', () => {
        countWrong += 1;
        console.log(countWrong)
    });
});

userkfM5 · Answer

As mentioned in my comment you can't assign an event listener to multiple elements like that. The other answers have covered iterating over the buttons with forEach - here's an example with event delegation.

Add one listener to a parent container which catches events as they "bubble" up the DOM from its children (the buttons). Within the handler check that the clicked element is a button (and has a "count" class), and then increase/log the count.

const buttons = document.querySelector('.buttons');
buttons.addEventListener('click', handleClick);

let count = 0;

function handleClick(e) {
  if (e.target.matches('button')) {
    if (e.target.classList.contains('count')) {
      console.log(++count);
    }
  }
}

button { border-radius: 5px; }
.count { background-color: lightgreen; }
.count:hover { cursor: pointer; }

Green buttons increase the count

Variable value won't increment by 1 in Javascript

4 Answers