CODEWITHSUNDEEP
javascriptevent-handlingdom-eventsevent-listenereventhandler
Ivano M.
Ivano M.

Reputation: 3

I can't get addEventListener to work properly

I hope my question won't be too stupid, but I've just recently started to learn programming. I'm trying to create a small counter web app where there are two buttons (minus and plus) that decrease/increase the counter by -1/+1 each time they are pressed.

There are actually two problems:

  1. The counter doesn't work as expected. Every time I press on a button it increases first of +1, then +2 and so on.

  2. Once I refresh the page and press on the plus button it completely ignores the conditional that disables the minus button when the counter is 0.

I noticed that if I don't nest my eventHandlers in the bigger function that checks first whether the counter is 0 or not the counter works exactly as expected being incremented by +1/-1.

let counter = document.querySelector('.num-paragraph');
const minusBtn = document.querySelector('.minus');
const plusBtn = document.querySelector('.plus');
const resetBtn = document.querySelector('.reset-btn');
counter.textContent = 0;


plusBtn.addEventListener('click', function() {
    if (counter.textContent == 0) {
        minusBtn.disabled = true;
    } else {
        minusBtn.disabled = false;
    }

    plusBtn.addEventListener('click', function() {
        counter.textContent = Number(counter.textContent) + 1;
    });

    minusBtn.addEventListener('click', function() {
        counter.textContent = Number(counter.textContent) - 1;

    });
    resetBtn.addEventListener('click', () => counter.textContent = 0);


});

Upvotes: 0

Views: 1012

Answers (2)

Michał
Michał

Reputation: 45

I think shouldn't nest all those event listeners in plusBtn.addEventListener. Try to split them and make work independently. If you want to check if current counter's value is 0 to disable minus button if it's so, just move your if statement to minusBtn listener:

minusBtn.addEventListener('click', function() {
    counter.textContent = Number(counter.textContent) - 1;
    if (counter.textContent == 0) {
        minusBtn.disabled = true;
    } else {
        minusBtn.disabled = false;
    }
}

Upvotes: 1

clod9353
clod9353

Reputation: 2002

There are a few problems in your code. The biggest one is that you are adding event listeners inside another event listener. That's pretty much never a good idea.

What I would do is having 4 different event listeners (not nested), one for the plus button, one for the the minus, one for reset button and another one to disable the minus button:

plusBtn.addEventListener('click', function() {
  counter.textContent = Number(counter.textContent) + 1;
});

minusBtn.addEventListener('click', function() {
  counter.textContent = Number(counter.textContent) - 1;
});

resetBtn.addEventListener('click', () => counter.textContent = 0);

counter.addEventListener('change', function(){
  if(counter.textContent == 0){
    minusBtn.disabled = true;
  }else{
    minusBtn.disabled = false;
  }
});

Note: if your counter start at 0, you should start with the minus button disabled

Upvotes: 0

Related Questions