我无法让 addEventListener 正常工作

Question

我希望我的问题不会太愚蠢，但我最近才开始学习编程。我正在尝试创建一个小型计数器网络应用程序，其中有两个按钮（减号和加号），每次按下时 decrease/increase 计数器减去 -1/+1。

其实有两个问题：

计数器没有按预期工作。每次我按下一个按钮，它首先增加 +1，然后是 +2，依此类推。
一旦我刷新页面并按下加号按钮，它就会完全忽略计数器为 0 时禁用减号按钮的条件。

我注意到，如果我不将我的 eventHandlers 嵌套在首先检查计数器是否为 0 的更大函数中，则计数器的工作方式与预期的完全一样，递增 +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);


});

Answer 1

您的代码中存在一些问题。最大的一个是您在另一个事件侦听器中添加事件侦听器。这几乎不是一个好主意。

我要做的是有 4 个不同的事件侦听器（未嵌套），一个用于加号按钮，一个用于减号，一个用于重置按钮，另一个用于禁用减号按钮：

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

注意：如果您的计数器从 0 开始，您应该从禁用减号按钮开始

Answer 2

我认为不应该将所有这些事件侦听器嵌套在 plusBtn.addEventListener 中。尝试将它们分开并独立工作。如果你想检查当前计数器的值是否为 0 以禁用减号按钮，如果是这样，只需将你的 if 语句移动到 minusBtn 侦听器：

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

我无法让 addEventListener 正常工作

I can't get addEventListener to work properly

javascript

event-listener

event-handling

dom-events

eventhandler