动态调用document.getElementById实现投票系统状态检测故障求助

问题排查 #

• 1. getElementById用法错误
  document.getElementById() 仅支持传入纯ID字符串，你写的[id*='gform_wrapper_" + i+ "']是CSS属性选择器语法，只能用于document.querySelector()/querySelectorAll()，所以永远找不到对应元素。
• 2. 循环逻辑错误
  当前循环只要某一个i对应的元素不存在，就会直接执行投票结束的隐藏逻辑，哪怕后面的i对应元素存在，也会被前面的错误逻辑覆盖，最终结果永远是显示投票结束。
• 3. ID大小写不匹配
  HTML里投票容器的ID是小写voting，JS里写的是大写Voting，ID是大小写敏感的，所以document.getElementById("Voting")会返回null，执行时会报错。
• 4. 动态加载时序问题
  如果Gravity Form的短代码是第三方应用异步渲染的，你在页面初始加载时直接执行JS，可能DOM还没渲染完成，自然找不到对应的gform_wrapper_*元素。

修复方案 #

修复后的JS代码 #

// 初始化状态为无活跃投票
let hasActiveVote = false;
// 遍历1-3的表单ID
for (let i = 1; i < 4; i++) {
  // 用querySelector匹配对应ID的元素
  const GravityFormCheck = document.querySelector(`#gform_wrapper_${i}`);
  // 只要找到一个存在的活跃表单，就标记为有投票
  if (GravityFormCheck) {
    hasActiveVote = true;
    break; // 找到后直接跳出循环，无需继续遍历
  }
}

// 统一根据最终状态处理显隐
const votingEl = document.getElementById("voting");
const noVotingEl = document.getElementById("noVoting");
if (hasActiveVote) {
  console.log('there are votes in progress');
  votingEl.hidden = false;
  noVotingEl.hidden = true;
} else {
  console.log('there are NO votes in progress');
  votingEl.hidden = true;
  noVotingEl.hidden = false;
}

如果是动态加载导致的元素找不到问题，可以把上述代码包裹在页面加载完成的监听事件中，等所有资源渲染完成后再执行检测：

window.addEventListener('load', function() {
  // 把上面的修复代码放到此处即可
})

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