点击按钮遍历div检查维护状态的JS代码故障排查

原代码问题分析 #

1. 按钮事件绑定错误：document.getElementsByName("BtnRdm")返回HTMLCollection集合，直接给集合绑定onclick无效，需指定具体元素。
2. 维护状态获取错误：document.getElementsByClassName("AlertMaint").value完全错误——该方法返回元素集合，无value属性，且需读取的是data-ix-tag对应的值而非元素value。
3. 遍历逻辑错误：循环中始终使用错误的MaintRequis变量判断，未正确获取当前元素的维护状态与料仓信息；原逻辑会对每个元素弹窗，不符合“存在需维护则提示对应料仓，全部正常则提示无需维护”的需求。

修复后的完整代码 #

HTML（无需修改） #

<div class="container">
  <div class="barcontainer">
    <div class="bar" name="Silo1" style="height:80%"><span class="AlertMaint" data-ix-tag="Alm_Maintenace_Silo1">Silo ~ 1</span></div>
  </div>
  <div class="barcontainer">
    <div class="bar" name="Silo2" style="height:70%"><span class="AlertMaint" data-ix-tag="Alm_Maintenace_Silo2">Silo ~ 2</span></div>
  </div>
  <div class="barcontainer">
    <div class="bar" name="Silo3" style="height:30%"><span class="AlertMaint" data-ix-tag="Alm_Maintenace_Silo3">Silo ~ 3</span></div>
  </div>
  <div class="barcontainer">
    <div class="bar" name="Silo4" style="height:90%"><span class="AlertMaint" data-ix-tag="Alm_Maintenace_Silo4">Silo ~ 4</span></div>
  </div>
  <div class="barcontainer">
    <div class="bar" name="Silo5" style="height:20%"><span class="AlertMaint" data-ix-tag="Alm_Maintenace_Silo5">Silo ~ 5</span></div>
  </div>
  <div class="barcontainer">
    <div class="bar" name="Silo6" style="height:40%"><span class="AlertMaint" data-ix-tag="Alm_Maintenace_Silo6">Silo ~ 6</span></div>
  </div>
  <div class="barcontainer">
    <div class="bar" name="Silo7" style="height:60%"><span class="AlertMaint" data-ix-tag="Alm_Maintenace_Silo7">Silo ~ 7</span></div>
  </div>
  <div class="barcontainer">
    <div class="bar" name="Silo8" style="height:10%"><span class="AlertMaint" data-ix-tag="Alm_Maintenace_Silo8">Silo ~ 8</span></div>
  </div>
</div>

<div class="BtnMaint_Parent">
  <div><input type="button" class="BtnMaint_Enf" name="BtnRdm" value="Recherche de maintenance" style="text-align: center" ;></div>
</div>

JavaScript #

function RechercheMaint() {
  // 获取所有带AlertMaint类的元素
  const alertElements = document.querySelectorAll(".AlertMaint");
  // 收集需要维护的料仓编号
  const silosNeedingMaint = [];

  alertElements.forEach(element => {
    // 读取data-ix-tag对应的值（dataset的驼峰命名转换：data-ix-tag → ixTag）
    const maintStatus = element.dataset.ixTag;
    // 按C#端返回的字符串值判断状态
    if (maintStatus === "true") {
      // 提取料仓编号
      const siloNumber = element.innerText.replace("Silo ~ ", "");
      silosNeedingMaint.push(siloNumber);
    }
  });

  // 根据收集结果弹窗提示
  if (silosNeedingMaint.length > 0) {
    alert("Les silos #" + silosNeedingMaint.join(", #") + " nécessitent une maintenance.");
  } else {
    alert("Vos silos n'ont pas besoin de maintenance. Bonne journée!");
  }
}

// 正确绑定按钮点击事件
const checkButton = document.querySelector('input[name="BtnRdm"]');
checkButton.onclick = RechercheMaint;

关键修复说明 #

1. 按钮事件绑定：改用document.querySelector直接获取单个按钮元素，避免集合操作的错误。
2. 维护状态读取：通过element.dataset.ixTag读取data属性值，遵循HTML data属性到JS的驼峰命名转换规则。
3. 逻辑优化：遍历元素时收集所有需维护的料仓，遍历完成后统一提示，避免多次弹窗；支持多个料仓同时提示。
4. 类型判断：由于data属性值始终为字符串，需用=== "true"做判断，而非直接与布尔值true比较。

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