无需刷新页面清除测验结束时的姓名输入框内容

嘿，这个问题我熟！既然页面不允许刷新，那咱们直接用JavaScript操作DOM来清空输入框就行，完全不用刷新页面。结合你的HTML结构，给你几个实用的方案：

方案1：在重启测验的触发事件中直接清空输入框 #

假设你有一个「重启测验」的按钮（比如类名为.js-restart-quiz），只需要在按钮的点击事件里添加清空输入框的逻辑：

// 获取重启按钮和姓名输入框元素
const restartBtn = document.querySelector('.js-restart-quiz');
const nameInput = document.querySelector('.js-name');

// 给重启按钮绑定点击事件
restartBtn.addEventListener('click', () => {
  // 核心：清空输入框内容
  nameInput.value = '';
  // 这里可以加上你的其他重启逻辑，比如重置题目状态、隐藏结果面板等
});

方案2：在重启测验的函数中加入清空步骤 #

如果你的重启逻辑是封装在一个函数里的，直接把清空输入框的代码加进去就行：

function restartQuiz() {
  // 先执行你的其他重启操作：比如重置分数、显示初始题目等
  // 然后清空姓名输入框
  document.querySelector('.js-name').value = '';
}

// 调用重启函数时就会自动清空输入框
// restartQuiz();

方案3：用表单的reset方法（需要微调HTML） #

如果愿意给输入框套一个<form>标签，还可以用表单原生的reset()方法来重置输入框：

修改后的HTML： #

<form class="js-quiz-form">
  <div class="js-quiz-submit"> 
    <input type="text" class="js-name" placeholder="Please Enter Your Name"/> 
    <input type="button" class="js-submit" value="Submit"/> 
  </div>
</form>

对应的JavaScript： #

const quizForm = document.querySelector('.js-quiz-form');

// 在重启测验时调用reset方法，会清空表单内所有输入框
function restartQuiz() {
  // 其他重启逻辑...
  quizForm.reset();
}

这些方法都是纯前端操作，完全不需要刷新页面，完美适配你「用户可重启测验」的需求~

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