JavaScript，在计算器中输出

我用JS编写的非常简单的计算器有一个问题。 我希望它在一个框中显示结果，但我不知道我做错了什么。 我的代码中可能还有一些不正确的地方。。。 请帮帮我

Javascript:

document.getElementById（'submit'）。onclick=function（）{
num1=parseFloat（document.getElementById（'valueA'）.value）；
num2=parseFloat（document.getElementById（'valueB'）.value）；
算术运算符=document.getElementById（“算术运算符”）.value；
开关（算术运算符）{
格“+”：
结果=num1+num2；
打破
案例'-'：
结果=num1-num2；
打破
案例“*”：
结果=num1*num2；
打破
案例“/”：
如果（num2！=0）
{
结果=num1/num2；
}否则{
结果='Dela inte med 0！'；
}
打破
违约：
结果='错误'；
}
document.getElementById（'calcForm'）。onclick=output；
window.alert（“结果”）；
};

布拉布拉


附加
分耙
分部
乘法
拉科纳乌特

您正在通过
id
进行选择，但值
算术运算符
是选择框的
名称

试试这个：

首先，您没有id为submit的元素
您正试图在元素存在之前将onclick处理程序添加到元素中
您正在选择id为的其他元素，但它们只有一个名称
您正在将单击事件添加到表单中，但不确定在没有方法输出的情况下该执行什么操作
文档。getElementById
通过元素的
id
获取元素。在多种情况下，您试图查找具有名称或类型的元素。那不行

document.getElementById（'calcForm'）.onclick=output

这将尝试将名为output的函数绑定到名为calcForm的元素的click事件。我不知道你在这里想干什么

要在输入或输出中显示结果，只需执行

document.getElementById（“idOfTheElement”）.value=result
因为您似乎很想知道解决方案-我为您创建了

请仔细阅读并检查我在您的代码中所做的编辑

许多错误、更改的打字错误（如其他人所述）包括：


每个
name=
实例都可以通过代码中的
id=
进行交换。。在javascript中，理解差异是至关重要的
您在开始时没有声明任何变量。任何javascript变量都以
var
开头（包括数组、对象甚至函数）
代码给出了一个POST错误。您必须处理表单的提交事件（因为HTML自动希望发送它）-请参阅函数
event.preventDefault（）中的第一行


重新编写的javascript代码：

document.getElementById('submitButton').onclick = function(event) {
    event.preventDefault();

    var num1 = parseFloat(document.getElementById('valueA').value),
        num2 = parseFloat(document.getElementById('valueB').value),
        arithmeticOperator = document.getElementById('arithmeticOperator').value,
        output = document.getElementById('result');

    switch(arithmeticOperator) {
        case '+':
            result = num1 + num2;
            break;
        case '-':
            result = num1 - num2;
            break;
        case '*':
            result = num1 * num2;
            break;
        case '/':
            if(num2 != 0)
            {
                result = num1 / num2;
            }else {
                result = 'Dela inte med 0!';
            }
            break;
        default:
            result = 'Error';
    }
    output.innerHTML = result;
    window.alert(result);
    return false;
};

以及经过一些修改的HTML：

<form name="calcForm" id="calcForm">
    <p><input type="number" id="valueA" placeholder="Värde A" /></p>
    <p><input type="number" id="valueB" placeholder="Värde B" /></p>

    <select name="arithmeticOperator" id="arithmeticOperator">
        <option value="+">Addition</option>
        <option value="-">Subtraktion</option>
        <option value="/">Division</option>
        <option value="*">Multiplication</option>
    </select>
    <button type="submit" id="submitButton">Räkna ut</button>

    <p>Result: <output id="result" form="calcForm"></output></p>
</form>




附加
分耙
分部
乘法
拉科纳乌特
结果:

document.getElementById
与元素ID一起使用，看看您是如何使用它的。您的
窗口。警报（'result'）将不会显示准确的结果，因为您在单引号中调用该结果。您能告诉我怎么做吗？或者再多告诉我一点。检查我的答案以获得完整的代码。尽管如此，您还是应该尝试根据这里收到的好建议修复自己的代码。