無法讓 if/else 函數與單選按鈕一起使用

Question

我已經在這個網站（和谷歌）上查看了我的問題的答案，但我似乎只能找到零碎的東西，沒有什么特別的。

我主要是在玩 JavaScript 和 HTML，但現在不嘗試使用 jquery。

因此，話雖如此，這就是我想要做的事情：我希望用戶輸入兩個數字，從四個單選按鈕的列表中選擇一個操作（加、減、乘、除），然后單擊一個按鈕，它鏈接到執行數學運算的函數，然后將其顯示在頁面上的文本框中。 我將如何僅使用 HTML 和 JavaScript 來做到這一點？ 在添加單選按鈕之前，我已經完成了所有工作。

代碼如下：

<script>
function operationForm (form) {
    var x = document.operationForm.getElementById("numberOne");
    var y = document.operationForm.getElementById("numberTwo");
    var operation;
    var answer;
    if (document.operationForm.addSelect.checked === true) {
        answer = x + y;
        document.operationForm.answerBox.value = answer;
    } else if (document.operationForm.subtractSelect.checked === true) {
        answer = x - y;
        document.operationForm.answerBox.value = answer;

    } else if (document.operationForm.multiplySelect.checked === true) {
        answer = x * y;
        document.operationForm.answerBox.value = answer;

    } else(document.operationForm.divideSelect.checked === true) {
        answer = x / y;
        document.operationForm.answerBox.value = answer;

    }
}
</script>

<h1>Let's calculate!</h1>

<form name="operationForm">
<p>
    <label>Enter two numbers, select an operation, and then click the   button below.
        <p>
            <label>Number One:
                <input type="text" name='numbers' id="numberOne">
                <br>
                <br>Number Two:
                <input type="text" name='numbers' id="numberTwo">
                <p>
                    <input type="radio" name="operations" id="addSelect" value=''>Add
                    <input type="radio" name="operations" id="subtractSelect" value=''>Subtract
                    <input type="radio" name="operations" id="multiplySelect" value=''>Multiply
                    <input type="radio" name="operations" id="divideSelect" value=''>Divide
                    <label>
                        <p>
                            <input type="button" value=" Calculate " onClick='operationForm(form);'>
                            <p>
                                <label>Your answer is:
                                    <input type="text" name="answerBox">

如果有人有任何修復或可以指出正確的語法方向來處理單選按鈕、鏈接到它們的函數以及鏈接到這些函數的 onClick 事件，我們將不勝感激。

Answer 1

考慮將<input type="button" value=" Calculate " onClick='operationForm(form);'>替換為<input type="button" value=" Calculate " onClick='operationForm();'> 。 接下來將函數operationForm更改為不接受參數。 然后將 id 添加到您的輸入答案框中。 接下來，對於函數中的每個 if 語句，使用 elementById 函數來獲取收音機和答案框。 例如，第一個 if 應該是if (document.getElementById("addSelect").checked) { answer = x + y; document.getElementById("answerBox").value = answer; } if (document.getElementById("addSelect").checked) { answer = x + y; document.getElementById("answerBox").value = answer; }

Answer 2

這有效：

JavaScript：

<script type="text/javascript">
function operationForm(){

    var form = document.forms['operation_form'];

    var x = form['numberOne'].value*1;
    var y = form['numberTwo'].value*1;

    var operation = null;
    var answer = null;

    if (form['addSelect'].checked == true) {
        answer = x + y;
    } else if (form['subtractSelect'].checked == true) {
        answer = x - y;
    } else if (form['multiplySelect'].checked == true) {
        answer = x * y;
    } else if (form['divideSelect'].checked == true) {
        answer = x / y;
    }

    form['answerBox'].value = answer;

}
</script>

HTML：

<form name="operation_form">
    <label>Enter two numbers, select an operation, and then click the   button below.</label>
    <br/>
    <label>Number One:</label><input type="number" name='numberOne' />
    <br/>
    <br/>Number Two:</label><input type="number" name='numberTwo' />
    <br/>
    <input type="radio" name="operations" id="addSelect" value='' />Add
    <input type="radio" name="operations" id="subtractSelect" value='' />Subtract
    <input type="radio" name="operations" id="multiplySelect" value='' />Multiply
    <input type="radio" name="operations" id="divideSelect" value='' />Divide
    <br/>
    <input type="button" value=" Calculate " onclick="operationForm();" />
    <br/>
    <label>Your answer is:</label><input type="text" name="answerBox">
</form>

這與您的示例之間的修復：

您提供的代碼有很多問題。 我會盡快更新這個答案，並盡可能多地更新。

更新：

請記住，這是為了幫助而不是懲罰。 所以請記住，在收聽隨附的反饋時，我希望您學習這些內容。

關於您的 HTML 的注釋：

1.)最大的問題是沒有一個<label>元素有結束的</label>標簽。 雖然，您的 html 元素都沒有任何結束標記。 這會將所有元素分組到一個大的父<label>中。 因此，當瀏覽器自動關閉文檔末尾未關閉的標簽時，這會導致混合子元素的大雜燴。 關閉你的元素。

2.)前兩個文本框具有相同的name="numbers"屬性。 您只能使用無線電類型輸入來做到這一點。

3.)您的<form> name=""屬性不能與您嘗試調用的 JavaScript 函數同名。 它們存儲在同一個瀏覽器命名空間中，因此會導致錯誤。

JavaScript 注釋：

1.）您的checked === true是一個精確的比較。 這幾乎永遠不會被評估為真實。 使用checked == true ，或者更好的是，只使用if( my_element.checked ){} 。 有時.checked將等於這樣的字符串： .checked = 'checked' 。 所以即使'checked'==true它永遠不會是真實的'checked'===true 。 ===表示完全相等。 所以只有true===true 。

2.)您的var x = document.opera.. ... .mberOne");會將整個<input>元素存儲到x變量中。您需要...mberOne").value; 所以只存儲<input>的值，而不是整個 html 元素。

3.)唯一具有getElementById()方法的對象是document 。 您不能從文檔form對象中使用它。

4.）您必須將x任何y輸入值轉換為數字。 如果不是， 5 + 5會給你55而不是10 ，因為它們被視為字符串。 我將它們乘以* 1來做到這一點。 為了安全起見，我還將<input type='text'屬性更改為type='number' 。

5.)您可以在函數結束時只分配一次answerBox.value ，而不是在每個if(){}括號中分配一次。 它的工作原理相同，但更具可讀性。

6.)我使用了form['numberOne']而不是form.numberOne的語法，但它們的工作方式相同。 它引用表單中存在的元素name （不一定是id ）。 <form>是唯一允許您執行此操作的對象，而<div>或<p>則不能。