JavaScript页面加载时元素无法隐藏问题求助

嘿，作为JS新手遇到这种加载时机的问题太正常啦，我来帮你拆解一下问题出在哪，再给你调整好的代码～

先说说你的代码里的两个核心问题 #

• <header onload="alert10()">是无效的：header元素本身不支持onload事件，这个事件通常只在<body>、<img>或者window对象上生效，所以你的alert10()函数大概率根本没被触发过。
• 逻辑嵌套混乱：你在alert10()里又给window.onload赋值了一个回调函数，这相当于把“隐藏元素”的操作又推迟到页面加载完成后，但如果alert10()没被正确触发，这整段逻辑都跑不起来；就算触发了，这种嵌套也完全没必要，反而容易搞混加载时机。

调整后的正确代码 #

我们换个思路：等页面的DOM结构完全加载好（确保能找到timer10元素），再判断分钟数并执行隐藏操作。直接用这段代码就行：

// 监听DOM加载完成事件，确保元素已经存在
window.addEventListener('DOMContentLoaded', function() {
  // 获取当前分钟数
  const currentMinutes = new Date().getMinutes();
  // 找到目标元素
  const timerElement = document.getElementById('timer10');
  
  // 先判断元素是否存在，避免报错
  if (timerElement && currentMinutes > 10) {
    timerElement.style.display = 'none';
  }
});

怎么用这段代码？ #

把这段代码放在<script>标签里，你可以选择：

• 放在HTML的<body>标签末尾（比如</body>之前），这样不用监听事件也能确保元素加载完成，但加DOMContentLoaded会更稳妥；
• 放在<head>标签里，这时候DOMContentLoaded的监听就必不可少啦，能保证代码在DOM准备好后再执行。

而且不用再给header加任何onload属性了，这段代码会自动在合适的时机运行～

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