如何让HTML与JavaScript在Atom中运行？网页按钮失效问题求助

嘿，作为刚入门JS的新手，遇到这种问题太正常了，我来一步步帮你搞定！

先修正代码里的小错误 #

你现在的代码里有个不起眼但很重要的问题：DOCTYPE声明写反了，正确的写法是<!DOCTYPE html>，你写成了<DOCTYPE! html>。这个错误会让浏览器进入「怪异模式」，可能导致各种奇怪的兼容性问题，先把这个改过来。

修正后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <button onclick="revealMessage()">Click me!</button>
  <p id="hiddenMessage" style="display:none">Filosofem</p>

  <script>
    function revealMessage() {
      document.getElementById("hiddenMessage").style.display = 'block';
    }
  </script>
</body>
</html>

为什么按钮还是没反应？大概率是运行方式的问题！ #

你之前遇到的net::ERR_FILE_NOT_FOUND错误，应该是之前尝试引用外部JS文件时路径/文件名出错了（比如文件名大小写不匹配、扩展名写错）。现在你把JS直接写在HTML里的<script>标签中，理论上应该能运行，但如果直接双击打开本地HTML文件，部分浏览器的安全限制会影响JS的执行。

在Atom中正确运行HTML/JS的步骤： #

• 第一步：安装Atom的atom-live-server插件
  打开Atom的设置（快捷键Ctrl+,或Cmd+,），进入「Install」面板，搜索atom-live-server并安装。
• 第二步：用本地服务器打开你的HTML文件
  在Atom的侧边栏找到你的HTML文件，右键点击它，选择「Open with Live Server」。这时候会自动在浏览器中打开一个http://localhost:xxxx开头的地址，而不是file://开头的本地文件路径。
• 第三步：验证效果
  现在点击按钮，应该就能正常显示隐藏的文本了！如果还是有问题，打开浏览器的开发者工具（F12），查看「控制台」标签，看看有没有新的错误提示，再针对性解决。

额外提示：如果之后想用外部JS文件 #

要是你之后想把JS代码单独放在.js文件里（比如script.js），要注意这几点：

• 确保HTML和JS文件在同一目录下，引用代码写成：<script src="script.js"></script>
• 文件名要完全匹配（Mac/Linux区分大小写，比如Script.js和script.js是两个不同的文件）
• 同样要用本地服务器打开，不要直接双击本地文件

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