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);
}

你可能会看到我添加了一个“减法”按钮。我可以看到你要去的地方，我只是想让你知道该怎么做。

两个按钮共享类“标志”（您可以添加所需的所有按钮，如“*”，“log”，“pow”等）。我们在所有这些上附加了“click”事件，我们得到了点击按钮的id，以便知道它将是什么样的操作（加法，减法等等）。

然后我们进行计算，并将结果打印在您创建的“output1”输入中（它不应该是输入，因为它会导致我们不得不在其中输入内容）

这是小提琴：https://jsfiddle.net/4jju6a12/1/

Answer 2

这将按照您的希望计算。如果你想稍后使用条件+ - * /首先添加它们作为选项，然后给它们id，然后使用那些id，而不仅仅是“id”，这是没有意义的。

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

    result = Number(num1) + Number(num2);
    document.getElementById("output1").value = result;

}

这是jsfiddle

Answer 3

所以这里有几件事。

您的功能的结束括号是a）而不是}。
if (id == add)中的ID未定义。您需要在函数中添加一个参数，以传递正在按下的按钮类型。
最后一行document.getElementById("answer").value = result;该ID应为output1。

尝试在浏览器中调试代码。 FireFox和Chrome都有js调试器，效果很好。但是，这是您正在寻找的解决方案。您应该能够从这里扩展到包括其他数学运算。

<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('add')">+</button>

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

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

</p>

<script>

    function myFunction(id) {
        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("output1").value = result;

    }
</script>

现在，您似乎刚刚开始使用Javascript。所以花一些时间来查看W3 School for javascript（http://www.w3schools.com/js/default.asp），一旦你掌握了JS（http://www.w3schools.com/jquery/default.asp），一定要查看jQuery教程。

Answer 4

这是一个工作小提琴：JSFiddle 您的代码有一些问题。 p代码不是value而是innerHTML。您的if语句永远不会被调用，因为没有id变量。

我的小提琴删除了它，但将来，当你添加功能时，做一些事情，比如传递字符串＆＃39;添加＆＃39;，减去＆＃39;进入函数并根据字符串执行不同的操作。

Answer 5

＆＃13;

function myFunction() {
  var num1 = parseFloat(document.getElementById("input1").value);
  var num2 = parseFloat(document.getElementById("input2").value);
  document.getElementById("answer").innerHTML = num1 + num2;
}

＆＃13;

<h1>My Basic Calculator</h1>
<form>
  <p>input 1:
    <input type="text" id="input1" size="5"/>
  </p>
  <br/>

  <p>input 2:
    <input type="text" id="input2" size="5"/>
  </p>
  <br/>

  <input type="button" value="+" onclick="myFunction()">

  <p id="answer"></p>
</form>

＆＃13;

确保正确关闭标记，并使用parseFloat方法将操作数字符串转换为数字。

HTML添加两个输入

5 个答案: