页面加载时Button自动触发点击，后续点击无响应问题求助

你给addEventListener传递的第二个参数是函数执行结果而非函数引用：

• addEventListener方法要求第二个参数是回调函数，只有事件触发时才会执行该函数
• 你写的passwordLengthChose(-1)会在代码运行到这一行时立即调用函数，把函数返回值（该函数没有写return语句，默认返回undefined）绑定给点击事件
• 这就导致页面加载时自动触发两次函数计算，后续点击按钮时没有可执行的回调逻辑，所以无任何响应

有两种常用的修复方式：

方案1：用箭头函数包裹回调 #

修改事件绑定代码，点击按钮时才会执行对应的长度调整逻辑：

minusEl.addEventListener('click', () => passwordLengthChose(-1));
plusEl.addEventListener('click', () => passwordLengthChose(1));

方案2：使用bind方法预设参数 #

bind方法会返回一个新的函数，不会立即执行，可以预先传入参数给目标函数：

minusEl.addEventListener('click', passwordLengthChose.bind(null, -1));
plusEl.addEventListener('click', passwordLengthChose.bind(null, 1));

可以给密码长度增加边界判断，避免出现负数或者过长的不合理长度：

function passwordLengthChose(value) {
    let passwordLength = parseInt(passwordLengthEl.innerText) + value;
    // 可根据需求自定义长度范围，示例限制为4~20位
    if (passwordLength < 4) passwordLength = 4;
    if (passwordLength > 20) passwordLength = 20;
    passwordLengthEl.innerText = passwordLength;
}

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