HTML按钮点击后页面自动刷新，无法实现元素显隐切换求助

错误点分析 #

你的代码存在多处语法错误，同时按钮的默认行为可能触发页面刷新，导致功能失效：

• 按钮事件属性写错：on click 应为 onclick（无空格）
• 函数名非法：My Function 包含空格，JavaScript 中标识符（函数/变量名）不能有空格，需改为 myFunction
• DOM 方法名错误：get_Element_By_Id 是错误写法，正确为 getElementById（驼峰命名，无下划线）
• 最后一段脚本存在语法错误：get_Element_)By_Id 多了一个右括号，需修正为 getElementById
• 若按钮处于 <form> 标签内，默认是提交按钮，点击会触发表单提交刷新页面，需显式设置 type="button" 或阻止默认行为

修正后的完整代码 #

<button type="button" onclick="myFunction()">Try it</button>

<div id="mountain_bikes">这是山地车元素内容</div>

<script>
function myFunction() {
  var x = document.getElementById("mountain_bikes");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>

<script>
// 初始隐藏元素
document.getElementById("mountain_bikes").style.display = "none";
</script>

额外优化建议 #

可以用 classList.toggle() 简化显示隐藏逻辑，代码更简洁：

function myFunction() {
  document.getElementById("mountain_bikes").classList.toggle("hidden");
}

对应的 CSS：

.hidden {
  display: none;
}

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