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

Question

所以我对编码很陌生，想尝试用 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);
}

Answer 1

简单修复，只需在 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>

Answer 2

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

Answer 3

正如 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").

我上面的代码片段不太有效 (1x2 = -1)。检查正确的 DOM 方法和 HTML Formelements https://www.w3schools.com/html/html_form_elements.asp for eg

Answer 4

当你想给一个变量赋值时，你只需要使用一个 = 把它想象成你试图在一张纸上做一个简单的数学方程式，你会做以下事情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

希望现在一切都crystal清楚了。

Answer 5

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

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

Why am I getting an undefined result with my calculator?

html

javascript

calculator

undefined