HTML adding two inputs

Question

I am trying to create a basic addition machine with HTML/Java.

Right now I am only using an addition button but I do want to add a button for subtraction, division and multiplication once I figure out how to get this code to work.

Every time I click on my addition button nothing appears in answer field. I am wondering if my buttons are incorrect or if I messed up with my variables in the script section.

I feel like I am missing something very simple or I'm just overlooking something I typed incorrectly.

<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>

What errors do you get in the browser's console? What's id in your example? You also use document.getElementById("answer").value to set the answer but the element with the ID of answer is a paragraph, not an input, so it has no value property. — j08691
– j08691, Commented Nov 5, 2015 at 16:45
The answer field doesn't even need to be an input. It could be a <span> or <p> itself. I've also noticed that you do not close the following <p> tags... (idOne, idTwo). Try closing them. — cwiggo
– cwiggo, Commented Nov 5, 2015 at 16:51

Enjoyted · Accepted Answer · 2015-11-05 17:02:21Z

I removed plenty of things I found to be "useless" and I am sorry if they weren't, you can still add them back.

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

as you may see I added a "substract" button. I can see where you're going, and I just wanted to give you an idea how to do.

Both the buttons share the class "signs" (you can add all the buttons you want, like "*", "log", "pow" etc etc). We attach the "click" event on all of them, and we get the id of the clicked button, in order to know what kind of an operation it will be (addition, substraction, etc etc..)

we then do the calcul, and print the result inside the "output1" input you created (it shouldn't be an input, as it's missleading weither we have to enter something in it or not)

here's the fiddle : https://jsfiddle.net/4jju6a12/1/

Taco Bearz · Accepted Answer · 2015-11-05 17:02:36Z

1

So there are a couple of things here.

The end bracket to your function is a ) not a }.
id in if (id == add) is not defined. You'll need to add an argument to your function to pass in what type of button is being pressed.
the last line document.getElementById("answer").value = result; The Id should be output1.

Try debugging your code in a browser. Both FireFox and Chrome have js debuggers that work well. However, here is the solution you're looking for. You should be able to expand from here to include other mathematical operations.

<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>

Now, it seems like you're just getting started with Javascript. So take some time to check out W3 School for javascript (http://www.w3schools.com/js/default.asp) and be sure to look at the jQuery tutorials also once you've got a good handle on JS (http://www.w3schools.com/jquery/default.asp).

answered Nov 5, 2015 at 17:02

Taco Bearz

111 bronze badge

2 Comments

quoo Over a year ago

I'd argue that w3schools is not the best source for learning JS. I'd start with mozilla: developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/…

Cory Over a year ago

Thank you. I have been looking at w3schools and I was able to set up basic programs like changing a strings font.

asimovwasright · Accepted Answer · 2015-11-05 17:16:44Z

1

This will calculate as you are hoping. If yuo want to use the conditional later for + - * / first add them as options, then give them id's, then use those id's, not just "id" which is meaningless.

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;

}

And here's the jsfiddle

edited Nov 5, 2015 at 17:16

answered Nov 5, 2015 at 17:02

asimovwasright

8381 gold badge11 silver badges28 bronze badges

Comments

Ben Felda · Accepted Answer · 2015-11-05 17:02:00Z

0

Here is a working fiddle: JSFiddle A few problems with your code. p tags don't have a value but an innerHTML. Your if statement never gets called because there is no id variable.

My fiddle removes that but in the future, when you add functionality, do something like pass a string 'add', 'subtract' into the function and perform different actions based on the string.

answered Nov 5, 2015 at 17:02

Ben Felda

1,48210 silver badges16 bronze badges

Comments

J0e3gan · Accepted Answer · 2015-11-05 17:34:05Z

0

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

<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>

Make sure you close tags properly, and use parseFloat method to convert operand strings to numbers.

edited Nov 5, 2015 at 17:34

J0e3gan

8,96810 gold badges58 silver badges81 bronze badges

answered Nov 5, 2015 at 17:20

Robin

591 silver badge8 bronze badges

2 Comments

Enjoyted Over a year ago

why would you use parseFloat() over Number() ?

Robin Over a year ago

yes I agree if you want use Number(),, i just want to show him that there is many method available, every method has different use.

Collectives™ on Stack Overflow

HTML adding two inputs

5 Answers 5

Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related