javascript - 使用 JavaScript 制作计算器但不起作用

Question

我是 JavaScript 新手，我决定编写一个计算器，但它不起作用，我知道它是正确的，它与代码无关，或者可能是我不知道。但超过 90% 的确定问题不是代码，因为我在互联网上写了相同的代码。我试图将它写在一个外部 JS 文件中，所以我想将它粘贴到这里，这样你就不会被打扰了。谢谢...

let result = document.querySelector('.result');
function sum() {
    let num1 = document.querySelector('.num1');
    let num2 = document.querySelector('.num2');

    let num1 = parseInt(num1);
    let num2 = parseInt(num2);

    let submit = num1 + num2;

    result.textContent = submit;
}

<label for="num1">Number 1 : </label>
<input type="number" class="num1" /><br><br>

<label for="num2">Number 2 : </label>
<input type="number" class="num2" /><br><br>

<input type="button" style="margin-left: 10px;" value="Submit" onclick="sum()"></button><br><br>

<label for="result">Result : </label>

<h1 class="result" />dd</h1>

Answer 1

代码中的三个问题:

• let 不能对同一变量使用两次。这会产生解析错误。
• 没有 id 等于“result”的 HTML 元素。您应该将 class="result" 更改为 id="result"。
• 代码尝试添加 HTML 元素，但您应该采用 value 属性。

let result = document.getElementById('result');
function sum() {
    let num1 = document.querySelector('.num1');
    let num2 = document.querySelector('.num2');
    num1 = parseInt(num1.value); // Take valeu!
    num2 = parseInt(num2.value);

    let submit = num1 + num2;

    result.innerHTML = submit;
}

<label for="num1">Number 1 : </label>
<input type="number" class="num1" /><br><br>

<label for="num2">Number 2 : </label>
<input type="number" class="num2" /><br><br>

<input type="button" style="margin-left: 10px;" value="Submit" onclick="sum()"></button><br><br>

<label for="result">Result : </label>

<h1 id="result" />dd</h1>