为何需刷新页面才能让JS性格测试代码输出更新？求修复方案

问题成因 #

pnum是全局变量，初始化值为0，但每次点击按钮调用personalitycondition()时，会在原有数值上累加新的分数，不会重置。比如第一次计算后pnum为3，第二次作答点击按钮时，会在3的基础上继续加当前选择的分数，导致最终结果只增不减，自然不会随新选项变化。只有刷新页面时全局变量才会重新初始化，所以刷新后才能得到正确结果。

修复方案 #

有两种简单的修复方式：

方式一：将pnum移至函数内部 #

把pnum的声明放到personalitycondition()函数里，每次调用函数时都会重置为0，重新计算当前选项的分数：

var q1Agree = document.getElementById("q1-agree");
var q1Neutral = document.getElementById("q1-nuetral");
var q1Disagree = document.getElementById("q1-disagree");

var q2Agree = document.getElementById("q2-agree");
var q2Neutral = document.getElementById("q2-nuetral");
var q2Disagree = document.getElementById("q2-disagree");
var result = document.getElementById("result");

function personalitycondition() {
  var pnum = 0; // 每次调用函数时重置为0
  if (q1Agree.checked) {
    pnum += 2;
  } else if (q1Neutral.checked) {
    pnum += 1;
  } else if (q1Disagree.checked) {
    pnum += 0;
  }

  if (q2Agree.checked) {
    pnum += 2;
  } else if (q2Neutral.checked) {
    pnum += 1;
  } else if (q2Disagree.checked) {
    pnum += 0;
  }

  if (pnum > 4) {
    result.innerHTML = "You are a confident and energetic person.";
  } else if (pnum >= 2) {
    result.innerHTML = "You are a balanced and level-headed person.";
  } else {
    result.innerHTML = "You are a reserved and thoughtful person.";
  }
}

方式二：在函数开头重置pnum #

如果要保留全局变量，在函数执行开始时将pnum重置为0：

var q1Agree = document.getElementById("q1-agree");
var q1Neutral = document.getElementById("q1-nuetral");
var q1Disagree = document.getElementById("q1-disagree");

var q2Agree = document.getElementById("q2-agree");
var q2Neutral = document.getElementById("q2-nuetral");
var q2Disagree = document.getElementById("q2-disagree");
var result = document.getElementById("result");

var pnum = 0;

function personalitycondition() {
  pnum = 0; // 每次调用先重置分数
  if (q1Agree.checked) {
    pnum += 2;
  } else if (q1Neutral.checked) {
    pnum += 1;
  } else if (q1Disagree.checked) {
    pnum += 0;
  }

  if (q2Agree.checked) {
    pnum += 2;
  } else if (q2Neutral.checked) {
    pnum += 1;
  } else if (q2Disagree.checked) {
    pnum += 0;
  }

  if (pnum > 4) {
    result.innerHTML = "You are a confident and energetic person.";
  } else if (pnum >= 2) {
    result.innerHTML = "You are a balanced and level-headed person.";
  } else {
    result.innerHTML = "You are a reserved and thoughtful person.";
  }
}

修改后，每次点击按钮都会基于当前选择的选项重新计算分数，无需刷新页面就能得到正确输出。

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