无法获取要发送的无线电值

Question

我正在制作一个表格，该表格应将表格中的三个问题加起来。如果最终值等于 3，它应该在单击提交按钮时打开调用另一个名为 toggletab() 的函数。我试过这个，它根据值告诉我通过或错误，但它不起作用。我不擅长 JavaScript，这让我很困惑。看起来它是单独运行每个问题，而不是等到最后并一起计算它们。我无法弄清楚为什么会这样。如果有人知道该怎么做，我也不确定如何调用单独文件中的另一个函数。

谢谢。这是 HTML

<fieldset class="article">

      <legend>Have you had your record expunged before?</legend>
      <input type="radio" name="field1" value="0"  />
      <label>
        Yes
      </label>
      <input type="radio" name="field1" value="1" />
      <label>
        No
      </label>

  </fieldset>

    <fieldset class="article">
      <legend>Do you have any charges pending against you?</legend>
      <input type="radio" name="field2" value="0" onclick="getscores2(this)" />
      <label>
        Yes
      </label>
      <input type="radio" name="field2" value="1" onclick="getscores2(this)" />
      <label>
        No
      </label>
    </fieldset>

 <fieldset>
                <legend>Is your drivers license suspended?</legend>
                 <input type="radio" name="field3" value="0" onclick="getscores3(this)"/>
                <label>
                     Yes
                </label>
                 <input type="radio" name="field3" value="1" onclick="getscores3(this)"/>
                 <label>
                     No
                </label>
            </fieldset>
            <fieldset id="submitbutton" class="article">
  <input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>


</form>

<p id="totalScore">this is answer </p>

  <button onclick = "toggletab()" id="tabButton"><h3>first results</h3>
 </button>
       <form>
         <div id="first"  >
         <fieldset>
                <label>


  <fieldset class="article">

         <legend>Have you had your record expunged before?</legend>
      <input type="radio" name="field1" value="0"  />
      <label>
        Yes
      </label>
      <input type="radio" name="field1" value="1" />
      <label>
        No
      </label>

  </fieldset>

    <fieldset class="article">
      <legend>Do you have any charges pending against you?</legend>
      <input type="radio" name="field2" value="0" onclick="getscores2(this)" />
      <label>
        Yes
      </label>
      <input type="radio" name="field2" value="1" onclick="getscores2(this)" />
      <label>
        No
      </label>
    </fieldset>

 <fieldset>
                <legend>Is your drivers license suspended?</legend>
                 <input type="radio" name="field3" value="0" 
     onclick="getscores3(this)"/>
                <label>
                     Yes
                </label>
                 <input type="radio" name="field3" value="1" 
     onclick="getscores3(this)"/>
                 <label>
                     No
                </label>
            </fieldset>
            <fieldset id="submitbutton" class="article">
  <input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>


</form>

     <p id="totalScore">this is answer </p>

   <button onclick = "toggletab()" id="tabButton"><h3>first results</h3>
   </button>
       <form>
         <div id="first"  >
         <fieldset>
                <label>
                <legend>Is your arrest record a:</legend>
                    <input type="radio" name="field4" value="1" 
    onclick="getscores4(this)"/>
                    IC 35-38-9-1
                </label>
                <label>
                    <input type="radio" name="field4" value="2" 
    onclick="getscores4(this)"/>
                    IC 35-38-9-2
                </label>
                 <label>
                    <input type="radio" name="field4" value="3" 
   onclick="getscores4(this)"/>
                     IC 35-38-9-3
                </label>
                 <label>
                    <input type="radio" name="field4" value="4" 
  onclick="getscores4(this)"/>
                     IC 35-38-9-4
                </label>
                 <label>
                    <input type="radio" name="field4" value="5" 
      onclick="getscores4(this)"/>
                     IC 35-38-9-5
                </label>
            </fieldset>

这是 JavaScript

function getscores1(score1) {
var getscores1 = (score1.value);
sendScores(getscores1);
}

function getscores2(score2) {
var getscores2 = (score2.value);
sendScores(getscores2);
}

function getscores3(score3) {
var getscores3 = (score3.value);
sendScores(getscores3);
}
function sendScores(getscores1, getscores2, getscores3){
var total = getscores1 + getscores2 + getscores3;
answer(total);
}

function answer(total) {
if (total == 3) {
document.getElementById('totalScore').innerHTML = "false";
} else{
document.getElementById('totalScore').innerHTML = "pass";
}
}

Answer 1

您的函数定义的变量are not global。它们的值在函数返回后消失。因此，除非您将它们作为参数传递，否则您的 sendScores 函数实际上无法访问这些值。但是，虽然 sendScores 接受 3 个参数，但您只发送一个（调用函数时您也可以访问的那个）。

一种选择是将这些存储为全局变量，但全局变量是 General Evil™。或者，您可以在单击提交时获取所有值。这是一个工作示例。请注意，当用户没有回答一个或多个问题时，这并不适用。单击下面的“运行 sn-p”按钮以查看它的运行情况。

对于你的最后一个问题，你可以把你的js放在一个单独的文件中，然后把<script src="path/to/your/file/js"></script>放在你的html中来加载它。

function answer(total) {
  var score = 0;
  if (document.getElementById('exp_yes').checked) {
    score++;
  }
  if (document.getElementById('chg_yes').checked) {
    score++;
  }
  if (document.getElementById('sus_yes').checked) {
    score++;
  }
  if (score > 0) {
    document.getElementById('totalScore').innerHTML = "false";
  } else {
    document.getElementById('totalScore').innerHTML = "pass";
  }
}

<fieldset class="article">

  <legend>Have you had your record expunged before?</legend>
  <input id=exp_yes type="radio" name="field1" value="0" />
  <label>
        Yes
      </label>
  <input id=exp_no type="radio" name="field1" value="1" />
  <label>
        No
      </label>

</fieldset>

<fieldset class="article">
  <legend>Do you have any charges pending against you?</legend>
  <input id=chg_yes type="radio" name="field2" value="0" />
  <label>
        Yes
      </label>
  <input id=chg_no type="radio" name="field2" value="1" />
  <label>
        No
      </label>
</fieldset>

<fieldset>
  <legend>Is your drivers license suspended?</legend>
  <input id=sus_yes type="radio" name="field3" value="0" />
  <label>
                   Yes
              </label>
  <input id=sus_no type="radio" name="field3" value="1" />
  <label>
                   No
              </label>
</fieldset>
<fieldset id="submitbutton" class="article">
  <input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>


</form>

<p id="totalScore">this is answer </p>