我无法让 addEventListener 正常工作

Question

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

其实有两个问题：

1. 计数器未按预期工作。每次我按下一个按钮时，它都会首先增加 +1，然后是 +2，依此类推。

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

我认为不应该将所有这些事件侦听器都嵌套在 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;
    }
}

Answer 2

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

我要做的是有 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 开始，您应该从禁用减号按钮开始