Question

我刚开始学习如何使用javascript，这是我的第一语言。我尝试做的是让每个单选按钮从输入量中减去一个数量。现在它只适用于1个单选按钮。如果我点击2，它只是从底部减去。

＆＃13;

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Numbers Test</title>
</head>

<body>
  <form name="operation_form">
    <label>Verify</label>
    <br/>
    <label>Acert Score:</label><input type="number" name='acertscore' />
    <br/>
    <input type="radio" name="rad1" id="rad1" value='-100' />100
    <br/>
    <input type="radio" name="rad2" id="rad2" value='-200' />200
    <br/>
    <input type="radio" name="rad3" id="rad3" value='-250' />250
    <br/>
    <input type="button" value="Calculate" onclick="operationForm();" />
    <br/>
    <label>Score total is:</label><input type="text" name="answerbox">
    <br/>
    <input type="button" value="Reset" onClick="this.form.reset()" />
  </form>
  <script type="text/javascript">
    function operationForm() {
      var form = document.forms["operation_form"];
    
      var x = form["acertscore"].value;
    
      var operation = null;
      var answer = null;
    
      if (form["rad1"].checked == true) {
        answer = x - 100;
      }
      if (form["rad2"].checked == true) {
        answer = x - 200;
      }
      if (form["rad3"].checked == true) {
        answer = x - 250;
      }
    
      form["answerbox"].value = answer;
    }
  </script>
</body>

</html>

＆＃13;

我确定我走错了方向。如果有一种更容易的方式我会喜欢学习它。

Answer 1

每次您在选中的表单输入时，您都会设置Acert Score的答案减去单选按钮的值，每次都有效地覆盖它。

另外 - 你有没有理由使用单选按钮而不是复选框？你不必在表格上有一个重置按钮。

＆＃13;

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Numbers Test</title>
</head>

<body>
  <form name="operation_form">
    <label>Verify</label>
    <br/>
    <label>Acert Score:</label><input type="number" name='acertscore' />
    <br/>
    <input type="checkbox" name="rad1" id="rad1" value='-100' />100
    <br/>
    <input type="checkbox" name="rad2" id="rad2" value='-200' />200
    <br/>
    <input type="checkbox" name="rad3" id="rad3" value='-250' />250
    <br/>
    <input type="button" value="Calculate" onclick="operationForm();" />
    <br/>
    <label>Score total is:</label><input type="text" name="answerbox">
    <br/>
    <input type="button" value="Reset" onClick="this.form.reset()" />
  </form>
  <script type="text/javascript">
    function operationForm() {
      var form = document.forms["operation_form"];
    
      var x = form["acertscore"].value;
    
      var operation = null;
      var answer = null;
    
      if (form["rad1"].checked === true) {
        x -= 100;
      }
      if (form["rad2"].checked === true) {
        x -= 200;
      }
      if (form["rad3"].checked === true) {
        x -= 250;
      }

      answer = x;
    
      form["answerbox"].value = answer;
    }
  </script>
</body>

</html>

＆＃13;

Answer 2

当选中多个按钮时，也会执行多个if循环。如果选中了100和200单选按钮，则这两个if语句都会执行：

if (form["rad1"].checked == true) {
    answer = x - 100;
}
if (form["rad2"].checked == true) {
    answer = x - 200;
}

在第一个if语句之后，answer将等于x - 100。但是，由于同时选中了200单选按钮，answer将被x - 200覆盖，并为您提供您所看到的结果。

的解决方案的

<script type="text/javascript">
    function operationForm() {
        var form = document.forms["operation_form"];

        var x = form["acertscore"].value;

        var operation = null;

        // set answer equal to what is in the input box OR zero if it's empty 
        // (since x would be undefined in that case)
        var answer = x || 0; 

        if (form["rad1"].checked == true) {
            answer = answer - 100;
        }
        if (form["rad2"].checked == true) {
            answer = answer - 200;
        }
        if (form["rad3"].checked == true) {
            answer = answer - 250;
        }

        form["answerbox"].value = answer;
    }
</script>

Answer 3

您不必单独处理这些复选框，您应该将它们设为实际复选框：

 function operationForm() {
   var form = document.forms.operation_form;

   var score = Number(form.acertscore.value);
   var boxes = form.querySelectorAll("input[type=checkbox]");
   for (i in boxes) score += boxes[i].checked ? Number(boxes[i].value) : 0;

   document.querySelector("#answer").innerHTML = score;
 }

<form name="operation_form">
  <label>Verify</label>
  <br/>
  <label>Acert Score:</label>
  <input type="number" name='acertscore' />
  <br/>
  <input type="checkbox" name="rad1" value='-100' />100
  <br/>
  <input type="checkbox" name="rad2" value='-200' />200
  <br/>
  <input type="checkbox" name="rad3" value='-250' />250
  <br/>
  <input type="button" value="Calculate" onclick="operationForm();" />
  <br/>
  <label>Score total is:</label>
  <span id="answer"></span>
  <br/>
  <input type="button" value="Reset" onClick="this.form.reset()" />
</form>

选中时，单选按钮从总计中减去

3 个答案: