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

时间:2017-12-01 19:25:03

标签: javascript forms submit radio

我正在制作一个表单,该表单应该在表单中提出三个问题并添加它们。如果结束值等于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";
}
}

1 个答案:

答案 0 :(得分:0)

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

一种选择是将这些存储为全局变量,但全局变量是General Evil™。或者,您可以在单击“提交”时获取所有值。这是一个有效的例子。注意,当用户没有回答一个或多个问题时,这不会出现这种情况。点击&#34;运行代码段&#34;下面的按钮可以看到它的实际效果。

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

&#13;
&#13;
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";
  }
}
&#13;
<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>
&#13;
&#13;
&#13;