HTML/JavaScript健康调查表单：结果显示异常及PDF导出求助

1. 修复「Results」按钮无结果显示问题 #

核心问题大概率是按钮未绑定点击事件、表单值获取逻辑错误，或结果未正确渲染到页面。以下是针对性修复方案：

关键修复步骤 #

• 给按钮绑定点击事件，确保能触发结果计算逻辑
• 正确遍历表单控件获取用户输入，避免undefined导致计算失败
• 在页面中预留结果容器，计算完成后将结果插入并显示

示例代码片段 #

<!-- 新增结果显示容器 -->
<div id="resultContainer" style="margin-top:20px; display:none; padding:15px; border:1px solid #ccc;"></div>

<button id="resultsBtn">Results</button>

<script>
// 绑定按钮点击事件
document.getElementById('resultsBtn').addEventListener('click', calculateResults);

function calculateResults() {
  // 获取表单输入值（以单选框为例）
  const q1 = document.querySelector('input[name="healthQ1"]:checked')?.value || 0;
  const q2 = document.querySelector('input[name="healthQ2"]:checked')?.value || 0;
  
  // 根据你的评估规则计算总分
  const totalScore = parseInt(q1) + parseInt(q2);
  let resultText = '';

  // 生成对应结果文本
  if (totalScore <= 3) {
    resultText = '你的健康状况需要关注，建议调整作息与运动习惯';
  } else if (totalScore <= 6) {
    resultText = '你的健康状况一般，保持规律生活即可';
  } else {
    resultText = '你的健康状况良好，继续保持当前状态';
  }

  // 渲染结果到页面
  const container = document.getElementById('resultContainer');
  container.innerHTML = `
    <h3>健康评估结果</h3>
    <p>${resultText}</p>
    <p>总分：${totalScore}</p>
  `;
  container.style.display = 'block';
}
</script>

检查点 #

• 确认表单元素的name/id与JS中的选择器完全匹配
• 计算时注意类型转换，避免字符串拼接导致的错误
• 结果容器需提前在HTML中定义，初始可设为隐藏状态

2. 实现问题、答案及结果导出PDF功能 #

推荐使用jsPDF+html2canvas组合实现，无需复杂后端逻辑，适合初学者快速上手。

实现步骤 #

1. 引入CDN资源（直接添加到HTML头部）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

2. 添加导出按钮并编写导出逻辑

<button id="exportPdfBtn" style="margin-left:10px;">导出PDF</button>

<script>
document.getElementById('exportPdfBtn').addEventListener('click', exportToPdf);

async function exportToPdf() {
  // 获取包含所有内容的容器（需将表单、结果都包裹在此容器内）
  const contentContainer = document.getElementById('healthFormContainer');
  
  // 将容器转为高清图片
  const canvas = await html2canvas(contentContainer, { scale: 2 });
  const imgData = canvas.toDataURL('image/png');

  // 初始化PDF文档
  const pdf = new jspdf.jsPDF('p', 'mm', 'a4');
  const imgWidth = 210; // A4纸宽度（mm）
  const pageHeight = 297; // A4纸高度（mm）
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  let heightLeft = imgHeight;
  let position = 0;

  // 添加图片到PDF
  pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;

  // 内容超出一页时自动分页
  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    pdf.addPage();
    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;
  }

  // 保存PDF文件
  pdf.save('健康评估报告.pdf');
}
</script>

注意事项 #

• 需将表单、结果等所有需要导出的内容，统一包裹在一个id="healthFormContainer"的容器内
• 若不想用图片转PDF的方式，也可手动遍历表单元素收集数据，再用jsPDF的API逐行添加文本，但代码复杂度更高

完整整合代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>健康评估调查</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <style>
    .question { margin:15px 0; }
    #resultContainer { margin-top:20px; padding:15px; border:1px solid #ccc; }
  </style>
</head>
<body>
  <div id="healthFormContainer">
    <h1>健康评估调查</h1>
    
    <div class="question">
      <p>1. 你每周运动次数？</p>
      <input type="radio" name="healthQ1" value="1"> 0次
      <input type="radio" name="healthQ1" value="2"> 1-2次
      <input type="radio" name="healthQ1" value="3"> 3-4次
      <input type="radio" name="healthQ1" value="4"> 5次及以上
    </div>

    <div class="question">
      <p>2. 你每天睡眠时间是否达到7小时？</p>
      <input type="radio" name="healthQ2" value="2"> 是
      <input type="radio" name="healthQ2" value="1"> 否
    </div>

    <button id="resultsBtn">Results</button>
    <button id="exportPdfBtn" style="margin-left:10px;">导出PDF</button>

    <div id="resultContainer" style="display:none;"></div>
  </div>

  <script>
    // 计算结果逻辑
    document.getElementById('resultsBtn').addEventListener('click', calculateResults);

    function calculateResults() {
      const q1 = document.querySelector('input[name="healthQ1"]:checked')?.value || 0;
      const q2 = document.querySelector('input[name="healthQ2"]:checked')?.value || 0;

      const totalScore = parseInt(q1) + parseInt(q2);
      let resultText = '';

      if (totalScore <= 2) {
        resultText = '你的健康状况需要关注，建议增加运动和保证睡眠';
      } else if (totalScore <= 4) {
        resultText = '你的健康状况一般，建议保持规律作息';
      } else {
        resultText = '你的健康状况良好，继续保持';
      }

      const container = document.getElementById('resultContainer');
      container.innerHTML = `
        <h3>健康评估结果</h3>
        <p>${resultText}</p>
        <p>总分：${totalScore}</p>
      `;
      container.style.display = 'block';
    }

    // 导出PDF逻辑
    document.getElementById('exportPdfBtn').addEventListener('click', exportToPdf);

    async function exportToPdf() {
      const contentContainer = document.getElementById('healthFormContainer');
      const canvas = await html2canvas(contentContainer, { scale: 2 });
      const imgData = canvas.toDataURL('image/png');

      const pdf = new jspdf.jsPDF('p', 'mm', 'a4');
      const imgWidth = 210;
      const pageHeight = 297;
      const imgHeight = (canvas.height * imgWidth) / canvas.width;
      let heightLeft = imgHeight;
      let position = 0;

      pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        pdf.addPage();
        pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }

      pdf.save('健康评估报告.pdf');
    }
  </script>
</body>
</html>

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