Javascript Can'；t使用单选按钮无法使用if/else功能

我在这个网站（和谷歌）上到处寻找我的问题的答案，但我似乎只能找到一些零碎的东西，没有什么特别的

我主要是在玩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">

函数操作表单（表单）{
var x=document.operationForm.getElementById（“numberOne”）；
变量y=document.operationForm.getElementById（“numberTwo”）；
var操作；
var回答；
if（document.operationForm.addSelect.checked==true）{
答案=x+y；
document.operationForm.answerBox.value=答案；
}else if（document.operationForm.subtractSelect.checked==true）{
答案=x-y；
document.operationForm.answerBox.value=答案；
}else if（document.operationForm.multiplySelect.checked==true）{
答案=x*y；
document.operationForm.answerBox.value=答案；
}else（document.operationForm.divideSelect.checked==true）{
答案=x/y；
document.operationForm.answerBox.value=答案；
}
}
让我们算算吧！

输入两个数字，选择一个操作，然后单击下面的按钮。

第一:



第二：

添加
减
乘
分


你的答案是：

---

如果有人有任何修正，或者可以为我指出正确语法的正确方向，以处理单选按钮、链接到它们的函数以及单击链接到这些函数的事件，我将不胜感激。

请考虑将

替换为

。接下来将函数

operationForm

更改为不接受任何参数。然后将id添加到输入答案框中。接下来，对于函数中的每个if语句，使用elementById函数获取收音机和应答器。例如，第一个if应该是

if（document.getElementById（“addSelect”）.checked）{
答案=x+y；
document.getElementById（“answerBox”）。值=答案；
}

此功能：

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>

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

函数操作形式（）{
var form=document.forms['operation_form']；
var x=形式['numberOne']。值*1；
变量y=形式['numberTwo']。值*1；
var操作=null；
var-answer=null；
if（表单['addSelect'].checked==true）{
答案=x+y；
}else if（形式['subtractSelect'].checked==true）{
答案=x-y；
}else if（form['multiplySelect'].checked==true）{
答案=x*y；
}else if（形式['divideSelect'].checked==true）{
答案=x/y；
}
表格['answerBox']。值=答案；
}

HTML:

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

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

输入两个数字，选择一个操作，然后单击下面的按钮。


第一:



第二点：


添加
减
乘
分




你的答案是：

修复了此示例和您的示例之间的问题：

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

<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上的注释：

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

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

1。）最大的问题是

元素都没有结束标记。 尽管如此，您的html元素都没有任何结束标记。 这将把所有元素分组在一个大的父级中

。 因此，当浏览器自动关闭文档末尾未关闭的标记时，会导致子元素混杂在一起。关闭你的元素

2。）前两个文本框具有相同的

name=“numbers”

属性。您只能通过收音机类型的输入来实现这一点

3。）您的

name=”“

属性不能与您尝试调用的JavaScript函数同名。它们存储在同一浏览器命名空间中，因此会导致错误

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>

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

1。）您的

检查===true

是一个精确的比较。这几乎永远不会被认为是真实的。使用

checked==true

，或者如果（my_element.checked）{}就使用

。有时
.checked
将等于如下字符串：
.checked='checked'
。因此，即使
'checked'==true
对于
'checked'==true
，它也永远不会是真实的。
==
表示完全相等。所以只有
true===true

2。）您的
var x=document.opera。mberOne“；
将整个
元素存储到
x
变量中。您需要有
…mberOne”）。值
的值，而不是整个html元素

3。）唯一具有
getElementById（）
方法的对象是
文档。你不能从文档中使用它