javascript - HTML 添加两个输入

Question

我正在尝试使用 HTML/Java 创建一个基本的加法机。

现在我只使用一个加法按钮，但一旦我弄清楚如何让这段代码工作，我确实想添加一个用于减法、除法和乘法的按钮。

每次我单击添加按钮时，答案字段中都不会出现任何内容。我想知道我的按钮是否不正确，或者我是否弄乱了脚本部分中的变量。

我觉得我错过了一些非常简单的东西，或者我只是忽略了我输入错误的东西。

<h1>My Basic Calculator</h1>
<p>input 1: <input id="input1" size="5"/></p><br>
<p>input 2: <input id="input2" size="5"/></p><br>
<button id ="add" onclick="myFunction()">+</button>
<p>Answer:<input id="output1" size="5"/></p>

<p id="idOne">
<p id="idTwo">
<p id="answer">
</p>

<script>

function myFunction() {
    var num1 = document.getElementById("input1").value;
    var num2 = document.getElementById("input2").value;
    var result;


    if (id == add) {
    result = Number(num1) + Number(num2);
    }


    document.getElementById("idOne").value = num1;
    document.getElementById("idTwo").value = num2;
    document.getElementById("answer").value = result;

    )
    </script>

Answer 1

我删除了很多我认为“无用”的内容，如果没有，我很抱歉，您仍然可以将它们添加回来。

html:

<h1>My Basic Calculator</h1>

<p>input 1: <input id="input1" size="5"/></p><br>

<p>input 2: <input id="input2" size="5"/></p><br>

<button class="sign" id="add">+</button>
<button class="sign" id="substract">-</button>

<p>Answer:<input id="output1" size="5"/></p>

js:

var do_calcul = function() {
    var num1 = Number(document.getElementById("input1").value);
    var num2 = Number(document.getElementById("input2").value);
    var result;

    if (this.id == "add") {
        result = num1 + num2;
    } else if (this.id == "substract") {
        result = num1 - num2;
    }
    document.getElementById("output1").value = result;
};

var signs_buttons = document.getElementsByClassName("sign");
for(var i=0;i<signs_buttons.length;i++){
    signs_buttons[i].addEventListener('click', do_calcul, false);
}

如您所见，我添加了一个“减去”按钮。我可以看到你要去哪里，我只是想告诉你该怎么做。

这两个按钮共享“signs”类(您可以添加您想要的所有按钮，如“*”、“log”、“pow”等)。我们将“click”事件附加到所有这些按钮上，并获取被单击按钮的 id，以便知道它将进行什么样的操作(加法、减法等)

然后我们进行计算，并在您创建的“output1”输入中打印结果(它不应该是输入，因为无论我们是否必须在其中输入某些内容，它都会产生误导)

这是 fiddle :https://jsfiddle.net/4jju6a12/1/