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

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

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

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

对于您的最后一个问题，您可以将您的 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>