给已使用innerHTML的div添加按钮，解决测验分数展示但按钮不显示问题

看起来你已经搞定了分数展示，但按钮卡壳了——先看你贴的代码片段，按钮部分是<button i...明显截断了，这大概率是问题的起点，咱们一步步来排查修复：

1. 先检查按钮的HTML语法完整性 #

最常见的坑就是标签没写完整，比如属性没闭合、标签漏了结束符。你可以把按钮代码补全成这样：

<div class="quizBtn">
  <br />
  <button id="submitBtn" class="quiz-action-btn">完成测验</button>
</div>

确保标签有完整的>和闭合的</button>，属性（比如id/class）也不要写一半就断了。

2. 排查CSS是否把按钮藏起来了 #

有时候按钮本身存在，但被CSS给“隐身”了：

• 检查.quizBtn或者按钮的类有没有设置display: none、opacity: 0、visibility: hidden这类属性
• 看看是不是被其他元素覆盖了（比如z-index层级太低）
• 用浏览器F12开发者工具选中按钮元素，直接看它的样式面板，就能一眼发现问题

3. 确认JS逻辑没误隐藏按钮 #

如果分数是JS动态渲染的，要检查有没有代码在展示分数后不小心把按钮容器隐藏了，比如：

// 错误示例：不小心把按钮容器藏了
document.querySelector('.quizBtn').style.display = 'none';

可以在渲染分数后，手动强制显示按钮：

// 渲染分数后显式展示按钮
document.getElementById('scoreArea').textContent = `你的分数：${finalScore}`;
document.querySelector('.quizBtn').style.display = 'block';

4. 完整的分数展示+提交跳转示例 #

给你一个可以直接参考的完整实现，包含提交分数到后端并跳转的逻辑：

<div class="container" id="quiz">
  <h1>Quiz</h1>
  <div class="quiz material-main">
    <h3 id="questions"></h3>
    <div id="audios"></div>
    <div id="images"></div>
    <div id="choices"></div>
    <!-- 分数展示区 -->
    <div id="scoreShow" style="margin: 20px 0; font-size: 1.2rem; font-weight: bold;"></div>
    <!-- 提交按钮容器 -->
    <div class="quizBtn">
      <br />
      <button id="submitScoreBtn" class="btn">提交分数并结束</button>
    </div>
  </div>
</div>

<script>
// 假设你已经计算出最终分数
const userFinalScore = 90;

// 展示分数
document.getElementById('scoreShow').textContent = `本次测验分数：${userFinalScore}分`;

// 绑定提交按钮点击事件
document.getElementById('submitScoreBtn').addEventListener('click', async () => {
  try {
    // 发送分数到后端接口
    const res = await fetch('/api/save-quiz-score', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ 
        score: userFinalScore, 
        user: '当前用户标识' // 替换成实际用户ID/标识
      })
    });

    if (res.ok) {
      // 提交成功后跳转页面
      window.location.href = '/quiz-completed-page';
    } else {
      alert('分数提交失败，请重试');
    }
  } catch (err) {
    console.error('提交出错:', err);
    alert('网络异常，无法提交分数');
  }
});
</script>

5. 终极调试技巧 #

如果还是找不到问题，打开浏览器F12开发者工具：

• 切换到Elements标签，搜索quizBtn，确认按钮元素是否真的存在于DOM中
• 看Console标签有没有JS报错（比如变量未定义、语法错误），这些错误可能会打断按钮的渲染
• 提交时看Network标签，检查请求是否正常发送到后端

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