如何在JavaScript中通过条件判断更改输入框背景色（代码未生效）

你的代码有两个核心问题导致背景色不更新：

• 判断逻辑只在页面加载时执行了一次，点击按钮修改数值后不会重新触发判断
• 输入框的value默认是字符串类型，直接和数字比较可能出现类型转换错误

修改后的代码 #

HTML（无需改动） #

<div class="wrapper">
  <button onclick="increment()">Click to + 1!</button>
  <input class="inputfield" id="inc" type="text" value="0" />
</div>

JavaScript #

function increment() {
  var textbox = document.getElementById("inc");
  // 把字符串转成数字再自增，避免类型问题
  textbox.value = Number(textbox.value) + 1;
  
  // 每次点击后都执行颜色判断逻辑
  if (textbox.value > 3) {
    textbox.style.backgroundColor = "#AA0000";
  } else {
    // 数值≤3时恢复默认背景色，避免颜色一直停留在红色
    textbox.style.backgroundColor = "";
  }
}

关键改动说明 #

• 将颜色判断逻辑移入increment函数，确保每次点击按钮后都会检查数值并更新颜色
• 使用Number()把输入框的字符串值转为数字，避免字符串和数字比较时的异常（比如"10"和3比较虽然结果正确，但养成转类型的习惯更稳妥）
• 添加else分支，当数值回到≤3时恢复输入框的默认背景色，体验更完整

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