如何实现点击按钮（onclick）后显示JavaScript测验？

别担心，这个需求实现起来超简单，咱们只需要给测验内容加个“隐藏开关”，再配个触发按钮就行，我给你一步步拆解：

1. 给测验内容套个隐藏容器 #

把你原来的测验代码整个包裹在一个带ID的<div>里，初始设置为隐藏状态（用style="display: none"），这样页面加载时就不会直接显示测验了。

2. 添加触发按钮 #

在页面合适的位置（比如测验容器上方）加一个按钮，绑定点击事件，点击时把测验容器显示出来。

修改后的完整代码示例 #

HTML部分 #

<!-- 触发按钮 -->
<button onclick="showQuiz()">点击开始测验</button>

<!-- 隐藏的测验容器 -->
<div id="quizContainer" style="display: none;">
  <!-- 这里放你原来的测验HTML内容，比如题目、选项这些 -->
  <h3>JavaScript基础测验</h3>
  <div>
    <p>1. 以下哪个不是JavaScript的数据类型？</p>
    <input type="radio" name="q1" value="a"> A. Number<br>
    <input type="radio" name="q1" value="b"> B. String<br>
    <input type="radio" name="q1" value="c"> C. Boolean<br>
    <input type="radio" name="q1" value="d"> D. Float<br>
  </div>
  <!-- 其他测验内容继续放在这里 -->
</div>

JavaScript部分 #

// 显示测验的函数
function showQuiz() {
  const quizContainer = document.getElementById('quizContainer');
  quizContainer.style.display = 'block'; // 把隐藏的容器显示出来
}

额外优化小技巧 #

如果你不想用内联的onclick（更符合现代前端规范），可以把按钮的点击事件改成通过JS绑定：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const showBtn = document.querySelector('button');
  showBtn.addEventListener('click', function() {
    document.getElementById('quizContainer').style.display = 'block';
  });
});

这时候HTML里的按钮就不用写onclick了，直接写<button>点击开始测验</button>就行。

这样改完之后，页面加载时只有按钮显示，点击按钮才会把测验内容展示出来啦～

内容的提问来源于stack exchange，提问作者Antonio Andrés