Question

我正在制作一个小计算器（使用函数等），但是无论我填写什么内容，它始终会返回值0。

我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Index</title>

    <script type="text/javascript" src="index.js"></script>
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
    <body>
        <div id="mainContainer">
            <form>
<input type="number" id="value1">
<select id="operator"><option value="add">add</option><option value="minus">minus</option><option value="div">Divide</option><option value="mul">multiple</option></select>
<input type="number" id="value2"> 
<button id="calculate">Calculate</button>
            </form>
        </div>
    </body>
</html>

我的JavaScript：

function prepCalculate() {
    let v1 = document.querySelector("#value1");
    let v2 = document.querySelector("#value2");

    if (isNaN(v1) || isNaN(v2)) {
        window.alert('one of the inputs does not equal a nummeric value!');

        return;
    } else {
        calculate();
    }
}

prepCalculate();

function calculate() {
    let v1 = document.querySelector("#value1");
    let v2 = document.querySelector("#value2");
    let operator = document.querySelector("#operator");
    let cal;

    if (operator == 'add') {
        cal = v1 + v2;
    } else if (operator == 'minus') {
        cal = v1 - v2;
    } else if (operator == 'div') {
        cal = v1 / v2;
    } else {
        cal = v1 * v2;
    }

    alert(cal);
    return cal;
}

我的console.log()也没有显示任何错误……所以我的问题是：我在做什么错？

Answer 1

有几个问题：

您正在尝试使用元素本身，而不是它们的值。使用connect()访问值，例如：
```
.value
```
您在let v1 = document.querySelector("#value1").value; // ---------------------------------------^^^^^^ let v2 = document.querySelector("#value2").value; // ---------------------------------------^^^^^^ let operator = document.querySelector("#operator").value; // -----------------------------------------------^^^^^^元素中有<button id="calculate">Calculate</button>。 form元素中的默认type是button，因此单击该按钮将提交表单。您需要"submit"来避免这种情况。
您尚未将按钮连接到type="button"功能或calculate功能。研究如何设置事件处理程序（例如prepCalculate）。
addEventListener的{{1}}始终是字符串。您的大多数操作都会将这些字符串强制转换为数字，但是value不会强制转换（因为使用字符串的input是串联的）。您需要将+转换为数字。请参阅this answer，以了解许多实现此目的的选项。

旁注：尽管可以按照自己的方式使用+，但通过value值获取元素的惯用方式（也是最快的，通常并不重要）是{{1} }（否querySelector("#id")）。

Answer 2

querySelector返回节点，获取所需的值.value，然后获取input中的文本字符串，进行算术时还需要将其转换为数字

let v1 = document.querySelector("#value1").value|0;
let v2 = document.querySelector("#value2").value|0;
let operator = document.querySelector("#operator").value;

Answer 3

您要让v1和v2本身就是输入，而不是内部的值。

无论填写什么值，我的计算器都会返回值0

3 个答案: