CODEWITHSUNDEEP
javascripthtml
Cory
Cory

Reputation: 145

HTML adding two inputs

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>

Upvotes: 0

Views: 6666

Answers (5)

Robin
Robin

Reputation: 59

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.

Upvotes: 0

asimovwasright
asimovwasright

Reputation: 838

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

Upvotes: 1

Taco Bearz
Taco Bearz

Reputation: 11

So there are a couple of things here.

  1. The end bracket to your function is a ) not a }.
  2. 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.
  3. 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).

Upvotes: 1

Enjoyted
Enjoyted

Reputation: 1151

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/

Upvotes: 1

Ben Felda
Ben Felda

Reputation: 1484

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.

Upvotes: 0

Related Questions