javascript - 无法获取要发送的 radio 值

Question

我正在制作一个表格，该表格应将表格中的三个问题相加。如果最终值等于三，则在单击提交按钮时应该打开调用另一个名为“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 个参数，您只发送一个(调用该函数时您也可以访问的那个)。

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

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