單選按鈕從總數中減去

Question

我剛剛開始學習如何使用javascript，這是我的母語。 我想做的是讓每個單選按鈕從輸入數量中減去一個數量。 目前僅適用於1個單選按鈕。 如果我單擊2，則僅從底部的一個減去。

 <!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>

我敢肯定我會走錯路了。 如果有更簡單的方法，我很樂意學習。

Answer 1

您要在每次檢查表單輸入時將Acert分數的答案設置為減去單選按鈕的值，從而每次都有效地覆蓋它。

另外-您是否有任何理由使用單選按鈕而不是復選框？ 您不必在表單上有一個重置按鈕。

 <!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>

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 個解決方案

解決方案1
2 2017-06-28 21:58:18

解決方案2
0 2017-06-28 21:55:10

解決方案3
-1 2017-06-28 21:57:42

單選按鈕從總數中減去

問題描述

3 個解決方案

解決方案1 2 2017-06-28 21:58:18

解決方案2 0 2017-06-28 21:55:10

解決方案3 -1 2017-06-28 21:57:42

解決方案1
2 2017-06-28 21:58:18

解決方案2
0 2017-06-28 21:55:10

解決方案3
-1 2017-06-28 21:57:42