为何我的JavaScript在此处可用，本地主机及JSFiddle却无法运行？

兄弟，我太懂这种“在某个环境好好的，换个地方就直接罢工”的无语感了！咱们一步步来排查问题，大概率是这几个常见坑导致的：

1. JavaScript代码加载时机不对 #

如果你的<script>标签放在了<head>里，或者DOM元素还没渲染完成就执行了JS，那myFunction里根本找不到对应的<div>元素，自然没效果。

解决办法：把你的JS代码放在<body>标签的最后，确保所有DOM元素都加载完毕后再执行脚本。比如这样：

<!DOCTYPE html>
<html>
<body>
  <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
  <button onclick="myFunction()">Try it</button>
  <button onclick="showOtherDiv()">Show Other Div</button>

  <div id="div1" style="display: none;">这是第一个DIV</div>
  <div id="div2" style="display: none;">这是第二个DIV</div>

  <!-- JS放在body最后 -->
  <script>
    function myFunction() {
      const targetDiv = document.getElementById("div1");
      // 先检查元素是否存在，避免报错
      if (targetDiv) {
        targetDiv.style.display = targetDiv.style.display === "none" ? "block" : "none";
        // 隐藏其他DIV
        document.getElementById("div2").style.display = "none";
      }
    }

    function showOtherDiv() {
      const targetDiv = document.getElementById("div2");
      if (targetDiv) {
        targetDiv.style.display = targetDiv.style.display === "none" ? "block" : "none";
        document.getElementById("div1").style.display = "none";
      }
    }
  </script>
</body>
</html>

2. JSFiddle的加载模式坑 #

JSFiddle默认的JS加载模式可能是onLoad或者DOMContentLoaded，这会把你的函数包裹在局部作用域里，导致内联的onclick="myFunction()"找不到这个函数。

解决办法：在JSFiddle左侧面板找到「Load Type」，改成No wrap - in <body>，这样函数会挂载到全局作用域，就能正常触发了。

3. 元素选择器或作用域问题 #

• 检查你的myFunction里有没有写错<div>的id，比如拼写错误、重复id，这都会导致找不到元素。
• 避免把函数写在局部作用域里（比如匿名函数包裹），不然全局的onclick调用不到。

终极排查技巧 #

按F12打开浏览器开发者工具，看「Console」面板的报错信息！比如如果出现myFunction is not defined，就是作用域问题；如果是Cannot read properties of null，就是找不到DOM元素，直接定位问题根源。

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