BMI计算器切换BMI结果时无法移除已添加active类该如何修复

修复方法 #

核心问题 #

现有代码仅会给匹配的BMI区间色块添加active高亮类，没有在每次计算前清空所有历史添加的active类，导致多次计算后多个色块同时高亮。另外原有代码中BMI≥35的区间体重状态文案填写错误，也会一并修正。

修改后的完整JS代码 #

const hFeet = document.querySelector("#hFeet");
const hInch = document.querySelector("#hInch");
const wKg = document.querySelector("#wKg");
const submit = document.querySelector("#submit");
const result = document.querySelector("#result_area");
const wStatus = document.querySelector("#wst");

submit.addEventListener("click", bmiFunc);

function bmiFunc(event) {
  event.preventDefault();

  const height = hFeet.value * 0.3048 + hInch.value * 0.0254;
  const weight = wKg.value;
  const calculation = weight / Math.pow(height, 2);
  const final = calculation.toFixed(2);
  result.innerHTML = final;

  // 新增：清空所有已有的active高亮类
  document.querySelectorAll('.color .column.active').forEach(item => {
    item.classList.remove('active');
  })

  if (final < 16) {
    wStatus.innerHTML = "Severe Thinness";
    document.querySelector(".thin1").classList.add("active");
  } else if (final >= 16 && final < 17) {
    wStatus.innerHTML = "Moderate Thinness";
    document.querySelector(".thin2").classList.add("active");
  } else if (final >= 17 && final < 18.5) {
    wStatus.innerHTML = "Mild Thinness";
    document.querySelector(".thin3").classList.add("active");
  } else if (final > 18.5 && final <= 25) {
    wStatus.innerHTML = "Normal";
    document.querySelector(".norm1").classList.add("active");
  } else if (final > 25 && final <= 30) {
    wStatus.innerHTML = "Overweight";
    document.querySelector(".ow1").classList.add("active");
  } else if (final > 30 && final <= 35) {
    wStatus.innerHTML = "Obese Class I";
    document.querySelector(".obs1").classList.add("active");
  } else if (final >= 35 && final <= 40) {
    // 修正错误文案
    wStatus.innerHTML = "Obese Class II";
    document.querySelector(".obs2").classList.add("active");
  } else if (final > 40) {
    // 修正错误文案
    wStatus.innerHTML = "Obese Class III";
    document.querySelector(".obs3").classList.add("active");
  }
}

修改说明 #

• 新增的清空逻辑会在每次计算BMI前，选中所有色块中带有active类的元素，统一移除高亮类，确保每次只有最新匹配的区间会被高亮
• 修正了BMI≥35区间的错误体重状态文案，符合标准BMI分类规范

内容的提问来源于stack exchange，提问作者t.i.rony