为什么我的计算器会得到未定义的结果？答案

【问题标题】：Why am I getting an undefined result with my calculator?为什么我的计算器会得到未定义的结果？
【发布时间】：2020-02-24 23:22:15
【问题描述】：

所以我对编码很陌生，想尝试用 html 和 javascript 创建一个简单的计算器。但是当您单击计算时，结果只是在控制台中以未定义的形式返回。任何帮助将不胜感激！

html代码

<!DOCTYPE html>
<html lang="en">
    <head>

    </head>

    <body>
        <form>
            Value 1: <input type="text" id="value1">
            Value 2: <input type="text" id="value2">
            operator:
            <select id="operator">
                <option value="add">Add</option>
                <option value="min">Minus</option>
                <option value="div">Divide</option>
                <option value="mul">Multiply</option>
            </select>
            <button type="button" onclick="calc()" > Calculate</button>
        </form>

        <div id="Results"></div>

        <script src="Main.js"></script>
    </body>

</html>

然后是javascript代码

function calc() 
{
    var a = parseInt(document.querySelector("#value1").value);
    var b = parseInt(document.querySelector("#value2").value);
    var op = document.querySelector("#operator").value;
    var calculate;

    if(op == "add") 
    { 
        calculate == a + b;
    }
    else if(op == "min")
    {
        calculate == a - b;
    }
    else if(op == "div")
    {
        calculate == a / b;
    }
    else if(op == "mul")
    {
        calculate == a * b;
    }   
console.log(calculate);
}

【问题讨论】：

== 是比较运算符，= 是赋值运算符。 calculate == 错了！

标签： javascript html undefined calculator

【解决方案1】：

尝试在计算函数上只使用 = 而不是双等号，它只是在此处进行比较

【讨论】：

【解决方案2】：

轻松解决，只需在 if 语句中将 == 替换为 =

function calc() 
{
    var a = parseInt(document.querySelector("#value1").value);
    var b = parseInt(document.querySelector("#value2").value);
    var op = document.querySelector("#operator").value;
    var calculate;

    if(op == "add") 
    { 
        calculate = a + b;
    }
    else if(op = "min")
    {
        calculate = a - b;
    }
    else if(op = "div")
    {
        calculate = a / b;
    }
    else if(op = "mul")
    {
        calculate = a * b;
    }   
console.log(calculate);
}

<html lang="en">
    <head>

    </head>

    <body>
        <form>
            Value 1: <input type="text" id="value1">
            Value 2: <input type="text" id="value2">
            operator:
            <select id="operator">
                <option value="add">Add</option>
                <option value="min">Minus</option>
                <option value="div">Divide</option>
                <option value="mul">Multiply</option>
            </select>
            <button type="button" onclick="calc()" > Calculate</button>
        </form>

        <div id="Results"></div>

        <script src="Main.js"></script>
    </body>

</html>

【讨论】：

【解决方案3】：

您未定义的原因是因为您使用的是“==”运算符而不仅仅是“=”。

【讨论】：

【解决方案4】：

正如 enhzflep 的评论所暗示的那样 == 和 === 用于在 Javascript 中进行比较 === 检查类型。您的表单中还有提交按钮吗？

<form action="/action_page.php" id="form1">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="Submit">
</form>

你可以从元素中检索值 document.getElementById("elementID").

我上面的 sn-p 不太好用 (1x2 = -1)。检查正确的 DOM 方法和 HTML Formelements https://www.w3schools.com/html/html_form_elements.asp 例如

【讨论】：

【解决方案5】：

当你想给一个变量赋值时，你只需要使用一个= 想一想，就好像你试图在一张纸上做一个简单的数学方程，你会做以下A=1+1=2 那表示 A 是变量，2 是它的值。

对于 JavaScript 中的比较运算符，您应该使用双精度 == 或三等于 ===。

if(A == 2) {..}  //Means if A's value equals 2
if(A === 2) {..} //Means if A's value equals 2 AND A's data type is the same as 2's

希望现在一切都清楚了。

【讨论】：

谢谢你真的很有帮助，还有大家的回答！工作了一次，我真是个笨蛋