JavaScript课程作业：如何根据卡路里总和与目标值修改输入框样式？

看起来你的代码里有几个关键小问题导致样式切换没生效，我帮你拆解并修正一下：

主要问题分析 #

• 错误的数值获取逻辑：你写了parseFloat( document.getElementById("target") ).value，这里document.getElementById("target")拿到的是DOM元素本身，直接用parseFloat转换它会得到NaN，再调用.value就变成undefined了。正确的做法是先取元素的value属性，再用parseFloat转换。
• 混淆了数值变量与DOM元素：你把count赋值成了parseFloat后的数值，但之后又试图调用count.classList.add()——数值类型根本没有classList属性，你需要保留对count输入框元素的引用，再单独提取它的数值来做比较。
• 未清理旧样式类：如果不先移除之前添加的类，当状态切换时（比如从“达标”变“超标”），两个类会同时存在，可能导致样式冲突或不更新。

修正后的代码 #

function changeCount() {
  // 获取目标摄入量的DOM元素和对应数值
  const targetElement = document.getElementById("target");
  const target = parseFloat(targetElement.value);
  
  // 获取卡路里计数的DOM元素和对应数值
  const countElement = document.getElementById("count");
  const count = parseFloat(countElement.value);
  
  // 先移除所有相关样式类，避免样式叠加冲突
  countElement.classList.remove("good", "over");
  
  // 先判断数值是否有效，避免非数字输入导致的错误
  if (!isNaN(target) && !isNaN(count)) {
    // 刚好达标也显示绿色，逻辑更合理
    if (count <= target) {
      countElement.classList.add("good");
    } else {
      countElement.classList.add("over");
    }
  }
}

配套CSS样式示例 #

别忘了定义对应的CSS类，不然样式不会生效：

.good {
  background-color: green;
  color: black;
  font-weight: normal;
}

.over {
  background-color: red;
  color: white;
  font-weight: bold;
}

额外优化建议 #

可以给输入框绑定input事件，实现实时样式更新，不用手动触发函数：

// 页面加载完成后绑定事件
document.addEventListener("DOMContentLoaded", function() {
  const targetInput = document.getElementById("target");
  const countInput = document.getElementById("count");
  
  targetInput.addEventListener("input", changeCount);
  countInput.addEventListener("input", changeCount);
});

这样用户只要修改输入框内容，样式就会自动切换啦！

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