点击按钮无响应：修改W3Schools代码后无法切换标题文本

嘿，我来帮你搞定这个问题！你把原代码里的myDIV换成h3后点击按钮没反应，主要是两个地方出了问题，咱们一步步来修正：

1. 先修复函数的语法错误 #

你提供的原函数写法有个低级错误：重复写了函数声明关键字——Function function myFunction()，浏览器根本识别不了这个无效的函数定义，这是导致点击按钮没反应的核心原因！

正确的函数声明应该只保留小写的function：

function myFunction() {
  // 函数逻辑写在这里
}

2. 优化显示状态的判断逻辑 #

另外还有个潜在问题：如果你的<h3>元素初始的display样式不是通过内联style属性设置的（比如用CSS类或者浏览器默认样式），那么x.style.display一开始会是空字符串，而不是"none"，这时候原判断逻辑会直接把元素设为隐藏，但第二次点击才能正常切换。

为了让逻辑更可靠，我们可以用window.getComputedStyle()来获取元素实际的显示状态，不管样式是怎么设置的。

修正后的完整代码 #

HTML部分 #

<button onclick="myFunction()">Try it</button>
<div class="speech-buble-top">
  <h3 id="h3"> Happy Birthday Tiffany!</h3>
</div>

JavaScript部分 #

function myFunction() {
  var x = document.getElementById("h3");
  // 获取元素实际的计算样式
  var currentDisplay = window.getComputedStyle(x).display;
  
  if (currentDisplay === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

这样修改后，点击按钮就能正常切换标题的显示和隐藏啦！

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