JS项目：随机数对应区间矩形高亮异常问题求助

核心问题 #

你代码里的高亮和显示数值不匹配，是因为每次判断区间时都重新调用了makeNumber()——点击按钮时，你先调用makeNumber()把结果显示在h1里，然后执行statValue()，而statValue()里的每一个if/else分支又都重新生成了新的随机数，这就导致显示的数字和用来判断高亮的数字完全是两个不同的随机值，自然关联不上。

修正步骤 #

1. 只生成一次随机数：点击按钮时，先调用makeNumber()得到一个固定的随机值，把它存在变量里，后续的显示和区间判断都用这个变量。
2. 补全DOM元素获取：你代码里直接用test、h1、stat、normal这些变量，但没有从DOM中获取它们，浏览器会报错，需要先通过document方法获取这些元素。

修正后的完整代码 #

HTML（无需修改）

<div class="container">
  <div class="meter">
    <div class="stat normal"></div>
    <div class="stat stable"></div>
    <div class="stat warning"></div>
    <div class="stat overload"></div>
    <div class="stat critical"></div>
    <img class="gif" src="img/Blinking_warning.gif" alt="">
  </div>

  <h1>0</h1>
  <button class="btn">test</button>

</div>

CSS（无需修改）

.my-class {
  border: 3px solid black;
}

JavaScript（修正后）

// 先获取所有需要操作的DOM元素
const testBtn = document.querySelector('.btn');
const displayNum = document.querySelector('h1');
const statElements = document.querySelectorAll('.stat');
const normalStat = document.querySelector('.normal');
const stableStat = document.querySelector('.stable');
const warningStat = document.querySelector('.warning');
const overloadStat = document.querySelector('.overload');
const criticalStat = document.querySelector('.critical');
const warningGif = document.querySelector('.gif');

// 生成1-100随机数的函数
const makeNumber = () => {
  return Math.trunc(Math.random() * 100 + 1);
};

// 移除所有高亮和隐藏GIF的函数
function removeHighlights() {
  statElements.forEach(stat => {
    stat.classList.remove('my-class');
  });
  warningGif.style.visibility = 'hidden';
}

// 根据数值判断高亮哪个区间的函数
function highlightStat(value) {
  removeHighlights();
  if (value <= 20) {
    normalStat.classList.add('my-class');
  } else if (value > 20 && value <= 40) {
    stableStat.classList.add('my-class');
  } else if (value > 40 && value <= 60) {
    warningStat.classList.add('my-class');
  } else if (value > 60 && value <= 80) {
    overloadStat.classList.add('my-class');
  } else { // 剩下的就是>80的情况
    criticalStat.classList.add('my-class');
    warningGif.style.visibility = 'visible';
  }
}

// 按钮点击事件
testBtn.addEventListener('click', function() {
  const randomNum = makeNumber(); // 只生成一次随机数
  displayNum.innerText = randomNum; // 显示这个数值
  highlightStat(randomNum); // 用同一个数值判断高亮
});

额外优化点 #

• 给函数和变量起更清晰的名字（比如把remove改成removeHighlights，statValue改成highlightStat），方便后续维护。
• 最后一个else分支可以不用写value > 80，因为前面的条件已经覆盖了1-80的所有情况，剩下的必然是>80的数值。

内容的提问来源于stack exchange，提问作者Walter J K