为什么我必须不断刷新页面才能更改代码的输出并真正按照我的意图执行？答案

【问题标题】：Why do I have to keep refreshing the page for the output of the code to change and actually follow what I intended it to do?为什么我必须不断刷新页面才能更改代码的输出并真正按照我的意图执行？
【发布时间】：2023-02-07 00:09:24
【问题描述】：

显然我几分钟前发布了一个问题，说我的代码不工作，因为输出总是相同的，即使我输入不同的输入也没有改变，但我删除了它，因为我发现问题是我必须刷新整个页面并再次回答以获得预期的输出。每次我想要这样做时，我都必须继续这样做，否则输出将保持不变。有人可以帮我弄清楚为什么会发生这种情况以及如何解决吗？

代码：

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() {
  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.";
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <form id="q1">
    <h3>You are open about your feelings</h3>
    <label for="agree">Agree</label>
    <input type="radio" id="q1-agree" name="q1-personality" value="Agree"><br><br>
    <label for="nuetral">Nuetral</label>
    <input type="radio" id="q1-nuetral" name="q1-personality" value="Nuetral"><br><br>
    <label for="disagree">Disagree</label>
    <input type="radio" id="q1-disagree" name="q1-personality" value="Disagree"><br><br>
  </form>
  <form id="q2">
    <h3>It is difficult to get you excited</h3>
    <label for="agree">Agree</label>
    <input type="radio" id="q2-agree" name="q2-personality" value="Agree"><br><br>
    <label for="nuetral">Nuetral</label>
    <input type="radio" id="q2-nuetral" name="q2-personality" value="Nuetral"><br><br>
    <label for="disagree">Disagree</label>
    <input type="radio" id="q2-disagree" name="q2-personality" value="Disagree"><br><br>
  </form>

  <button type="button" onclick="personalitycondition()">Find Your Personality</button>
  <p id="result"></p>

</body>

</html>

另外，我没有真正尝试任何东西，因为我不知道问题是与代码有关还是与外部有关

【问题讨论】：

在函数内移动var pnum = 0;。否则，当您第二次单击该按钮时，它不会重置为 0。

标签： javascript html conditional-statements

【解决方案1】：

简而言之，问题出在您提供的 JavaScript 中。您已经全局定义了 pnum 变量。这意味着在函数personalitycondition完成后，pnum函数保持它的值，下一次函数执行时pnum的起始值不再是0，而是函数自己留下的值。

一个简单的解决方案是将 pnum 变量放在函数中，这样每次我们执行 personalitycondition 函数时都会重置该变量。另一种解决方案是在函数的开头将 pnum 设置为 0。

【讨论】：