如何实现点击提交按钮统计调查问卷YES选项总数

原代码存在的问题 #

• 循环变量起始值错误：问卷单选框name为question1/question2/question3，但循环从y=0开始，会尝试获取不存在的question0元素
• 单选框访问方式错误：错误使用document.forms.question[i]，应该直接操作通过getElementsByName获取的元素集合
• 未声明变量：totalVal、i未使用let/var声明，会成为全局变量引发潜在问题
• 表单默认提交行为未处理：点击Cancel按钮会触发表单提交，导致页面刷新

修正后的完整代码 #

<form id="surveyForm" onsubmit="return false;">
  <div class="field">
    <label class="label">This is question number 1</label>
    <div class="control">
      <label class="radio">
        <input type="radio" name="question1" value="1">
        Yes
      </label>
      <label class="radio">
        <input type="radio" name="question1" value="0">
        No
      </label>
    </div>
  </div>

  <div class="field">
    <label class="label">This is question number 2</label>
    <div class="control">
      <label class="radio">
        <input type="radio" name="question2" value="1">
        Yes
      </label>
      <label class="radio">
        <input type="radio" name="question2" value="0">
        No
      </label>
    </div>
  </div>

  <div class="field">
    <label class="label">This is question number 3</label>
    <div class="control">
      <label class="radio">
        <input type="radio" name="question3" value="1">
        Yes
      </label>
      <label class="radio">
        <input type="radio" name="question3" value="0">
        No
      </label>
    </div>
  </div>

  <div class="field is-grouped">
    <div class="control">
      <button class="button is-link" onclick="countYes()">Submit</button>
    </div>
    <div class="control">
      <button class="button is-link is-light" type="reset">Cancel</button>
    </div>
  </div>
</form>

<!-- 用于展示结果图片的容器 -->
<div id="resultImageContainer" style="margin-top: 20px; display: none;">
  <img id="resultImage" src="" alt="Survey Result">
</div>

<script>
function countYes() {
  let totalVal = 0;
  // 循环遍历question1到question3
  for(let y=1; y<=3; y++) {
    const questionNo = document.getElementsByName(`question${y}`);
    for (let i=0; i<questionNo.length; i++) {
      if (questionNo[i].checked) {
        totalVal += parseInt(questionNo[i].value);
      }
    }
  }
  
  console.log("YES总数：", totalVal);
  // 根据总数展示对应图片
  showResultImage(totalVal);
}

function showResultImage(count) {
  const container = document.getElementById('resultImageContainer');
  const img = document.getElementById('resultImage');
  
  // 根据YES数量设置对应图片地址，替换为你的实际图片URL
  switch(count) {
    case 0:
      img.src = "path/to/0-yes-image.jpg";
      break;
    case 1:
      img.src = "path/to/1-yes-image.jpg";
      break;
    case 2:
      img.src = "path/to/2-yes-image.jpg";
      break;
    case 3:
      img.src = "path/to/3-yes-image.jpg";
      break;
    default:
      img.src = "";
  }
  
  // 显示图片容器
  container.style.display = img.src ? "block" : "none";
}
</script>

关键修改说明 #

1. 循环变量修正：将循环起始值改为y=1，结束条件改为y<=3，匹配实际的单选框name
2. 单选框访问修正：直接使用questionNo[i]操作当前遍历的单选框元素
3. 变量声明：使用let声明totalVal、y、i，避免全局变量污染
4. 表单行为处理：给form添加onsubmit="return false;"阻止默认提交，Cancel按钮改为type="reset"实现重置表单功能
5. 图片展示功能：添加结果图片容器，编写showResultImage函数，根据YES总数切换不同图片，替换代码中的path/to/xxx为你的实际图片路径即可

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