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函数来获取无线电和answerBox。例如，第一个应该是 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>则不会。

无法使用if / else函数处理单选按钮

2 个答案:

更新