从单选按钮发送值答案

【问题标题】：Sending values from radio button从单选按钮发送值
【发布时间】：2017-11-27 22:04:31
【问题描述】：

我正在开发一个包含测验的网站。我目前正在尝试做的是在我点击提交时将一个值发送到我的函数，如果它是 0 则写“false”，如果它是 1 则写“pass”。我编写了 JavaScript，但它不起作用，我不确定为什么。当我点击单选按钮时，写入 HTML 事件正在触发，我认为这是因为我有它的 onclick。我不知道如何在没有它的情况下发送值，以及是否可以解决问题。我也知道，无论我点击什么，程序都只会写假，而不是“通过”表示否，“假”表示是。当我按下提交按钮时，它无法正常工作。假/通过不应该出现，直到它被按下，而是当我按下提交按钮时，它会将“假”更改为“通过”。我不知道如何解决这个问题，也不知道为什么会这样。

感谢您的帮助，如果需要更多说明，请告诉我。

这是我的 HTML

            <body>
             <form id="myForm">
         <div class="sub form-row align-items-center">
             <div class="col">
            <fieldset>
                <h3><legend>Eligibility Test</legend></h3>
            </fieldset>
             </div>
             </div>
             <div class="col">
               <fieldset>
                   <div class="col">
                <legend>Have you had your record expunged before?</legend>
                  <input type="radio" name="field1" id="field1" value="0" onclick="getscores1()"/>
                     <label>
                     Yes
                </label>
                    <input type="radio" name="field1" id="field1" value="1" onclick="getscores1()"/>
                 <label>
                     No
                </label>
                </fieldset>
             </div>
             <div class="col">
             <div class="row">
                 <fieldset>
                <legend>Do you have any charges pending against you?</legend>
                  <input type="radio" name="field2" id="field2 value="0" onclick="getscores2()"/>
                     <label>
                     Yes
                </label>
                       <input type="radio" name="field2" id="field2 value="1" onclick="getscores2()"/>
                 <label>
                     No
                </label>
            </fieldset>
                 </div>
             </div>
             <fieldset id="submitbutton">
                 <input type="button" id="submit" value="submit" 
             onclick='answer()' />
            </fieldset>
             <p id="totalScore">this is answer </p>

这是我的 JavaScript

             <script>
             function getscores1(){
             score1= document.getElementById('field1').value;
             answer(score1);
             }
             function answer(score1){
             if (score1 == 0 ){
             document.getElementById('totalScore').innerHTML = "false";
             }
             else{
             document.getElementById('totalScore').innerHTML = "pass";
             }
             }

             </script>

【问题讨论】：

你能把你的 HTML 和你的 JavaScript 分开吗？这真的很难阅读
“我不知道如何在没有它的情况下发送值”。忘记发送值。当您运行“answer”方法时，它不需要任何输入参数。将您的单选按钮分组，然后让您的“回答”功能从每个组中找到选定的单选，并读取该按钮的值。目前您在点击“提交”按钮时遇到问题，因为您没有为“score1”传递任何值，因此无法按预期执行if 语句，因为该参数为空。
@ADyson 我以为我通过 score1 来回答我在getscore1 底部使用的“answer(score1)”和 answer 参数？
当单选按钮更改是时，您会这样做，但当您调用 onclick='answer()' 时则不会。显然，这会再次运行逻辑并覆盖您之前运行它时发生的任何事情。

标签： javascript html forms function

【解决方案1】：

由于以下原因无法正常工作：

您在</fieldset> 之前缺少</div>
您的 ID 重复（2 个 field1 和 2 个 field2）
您重复的 field2 ID 都缺少右引号

考虑到您不允许使用重复的 ID，我建议您删除它们。当您在单击两个单选按钮时调用函数时，您实际上可以使用 this 运算符将元素本身传递给函数，而不是使用 ID。onclick="getscores1(this)"。

然后你只需要调整你的函数以将参数作为函数参数：

function getscores1(score1) {
  answer(score1.value);
}

这可以在以下示例中看到：

function getscores1(score1) {
  answer(score1.value);
}

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

<body>
  <form id="myForm">
    <div class="sub form-row align-items-center">
      <div class="col">
        <fieldset>
          <h3>
            <legend>Eligibility Test</legend>
          </h3>
        </fieldset>
      </div>
    </div>
    <div class="col">
      <fieldset>
        <div class="col">
          <legend>Have you had your record expunged before?</legend>
          <input type="radio" name="field1" value="0" onclick="getscores1(this)" />
          <label>
            Yes
          </label>
          <input type="radio" name="field1" value="1" onclick="getscores1(this)" />
          <label>
            No
          </label>
        </div>
      </fieldset>
    </div>
    <div class="col">
      <div class="row">
        <fieldset>
          <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>
      </div>
    </div>
    <fieldset id="submitbutton">
      <input type="button" id="submit" value="submit" onclick='answer()' />
    </fieldset>
    <p id="totalScore">this is answer </p>

希望这会有所帮助！ :)

【讨论】：

onclick='answer()' 仍然没有多大意义，如果按第二组收音机它会崩溃（getScores2 不存在）。