如何使用JavaScript的addEventListener()方法禁用按钮？代码无法生效求解决

当然可行，你代码失效的问题出在事件监听的写法上。

你原来的代码第三行：

start1.addEventListener('click', this.disabled = true);

这里犯了两个关键错误：

1. this.disabled = true是立即执行的赋值语句，不是回调函数。当代码执行到这一行时，这个赋值就会立刻生效（此时this指向全局对象window，而非按钮元素），完全达不到点击按钮时触发的效果。
2. addEventListener的第二个参数必须是函数引用，而不是一个表达式的执行结果。

给你两种正确的实现方式：

方式一：把禁用逻辑整合到start函数中 #

如果允许修改start函数，直接在里面添加按钮状态控制逻辑最简洁：

function start() {
  // 保留你原来的计时器启动代码
  this.disabled = true; // 此时this指向触发事件的startbtn按钮
  document.getElementById('pausebtn').disabled = false;
  document.getElementById('stopbtn').disabled = false;
}

let start1 = document.getElementById('startbtn');
start1.addEventListener('click', start);

方式二：单独添加事件回调函数 #

如果不想修改start函数，可以单独绑定一个匿名函数处理按钮状态：

let start1 = document.getElementById('startbtn');
let pausebtn = document.getElementById('pausebtn');
let stopbtn = document.getElementById('stopbtn');

// 绑定计时器启动逻辑
start1.addEventListener('click', start);
// 绑定按钮状态控制逻辑
start1.addEventListener('click', function() {
  this.disabled = true;
  pausebtn.disabled = false;
  stopbtn.disabled = false;
});

或者也可以把两个逻辑合并到一个回调里，减少事件监听数量：

let start1 = document.getElementById('startbtn');
let pausebtn = document.getElementById('pausebtn');
let stopbtn = document.getElementById('stopbtn');

start1.addEventListener('click', function() {
  start(); // 执行计时器启动
  this.disabled = true;
  pausebtn.disabled = false;
  stopbtn.disabled = false;
});

内容的提问来源于stack exchange，提问作者Higor456