我无法让 addEventListener 正常工作

如何解决我无法让 addEventListener 正常工作

我希望我的问题不会太愚蠢，但我最近才开始学习编程。 我正在尝试创建一个小型计数器 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);


});

解决方法

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

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

,

我认为不应该在 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;
    }
}