JS监听number类型input 分数达6000时修改元素背景色

你的代码不生效核心有4个问题：

• 事件触发逻辑错误：change和input事件仅在用户手动交互修改输入框内容时触发，通过JS代码直接给input.value赋值的操作，不会触发这两个事件，你绑定的颜色判断逻辑根本不会执行。
• 类型不严谨：input.value默认返回字符串类型，直接和数字6000比较依赖JS隐式类型转换，极端场景会出现判断错误。
• 逻辑断层：你更新后的代码里调用了未定义的handleValueChange函数，点击按钮加分后没有执行任何颜色判断逻辑。
• 额外冗余：最初代码里两次查询同一个DOM元素，scorePlayer1和scoreBackGrPlayer1实际指向同一个输入框，属于重复代码。

• 如果输入框允许用户手动输入分数，优先选input事件：输入内容发生变化就会实时触发，比失焦才触发的change事件体验更好。
• 你的场景里输入框设置了readonly属性，分数只能通过按钮点击修改，完全不需要给输入框绑定事件，每次修改分数后直接执行颜色判断逻辑即可，稳定性更高。

HTML部分 #

<input type="number" id="scorePlayer1" value="0" readonly="true">
<button id="addButton">+ 1000</button>

JS部分 #

const addButton = document.querySelector("#addButton");
const scorePlayer1 = document.querySelector("#scorePlayer1");

// 抽离分数校验与样式更新逻辑
function updateScoreStyle(score) {
  const currentScore = Number(score);
  if (currentScore >= 6000) {
    scorePlayer1.style.backgroundColor = "gold";
  } else {
    // 分数低于6000时恢复默认背景，不需要可以删除
    scorePlayer1.style.backgroundColor = "";
  }
}

// 加分按钮逻辑
addButton.addEventListener('click', () => {
  const newScore = Number(scorePlayer1.value) + 1000;
  scorePlayer1.value = newScore;
  // 修改分数后直接触发样式更新，不依赖输入框事件
  updateScoreStyle(newScore);
});

// 页面初始化时执行一次样式校验，覆盖初始值就达标的场景
updateScoreStyle(scorePlayer1.value);

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