Simple HTML/JavaScript calculator not working?

Question

HTML Code (Calculator.html):

    <!DOCTYPE html>
<html>
    <head
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Calculator</title>
         <link type="text/css" rel="stylesheet" href="Calculator_CSS.css">
    </head>
    <body>



    <input type ="text" name="number1" style="width:50px;" id="Number1">
    <select id="DropdownMenu1">
  <option>+</option>
  <option>-</option>
  <option>×</option>
  <option>÷</option> 
    </select>
    <input type ="text" name="number2" style="width:50px;" id="Number2">

    <input type="button" value="Calculate" id="submitButton" />

    <p>The answer is: <span id="answer"></span></p>

    <script src="Calculator_JS.js>"></script>

    </body>
</html>

Here is the JavaScript code(Calculator_JS.js):

var button = document.getElementById("submitButton");
button.onclick = function(){

if  (document.getElementById("DropdownMenu1").value == "+"){
    var num1 = document.getElementById('Number1').value;

    var num2 = document.getElementById('Number2').value;

    var answer = num1 + num2;

    document.getElementById('Answer').value = answer;

    }

}

For some reason when I click the calculate button it doesn't do anything. Any help will be awesome! Thanks!

Eldar B. · Accepted Answer · 2015-05-08 16:52:55Z

1

Try This Code

<html>

    <body>

        <script type="text/javascript">
            function Calc(){

                var num1a = document.getElementById("num1");
                var num2a = document.getElementById("num2");
                var ans = (num1a + num2a)
                document.write("<b>The Answer Is:</b>" + ans)

            }
        </script>


        <input type ="text" id="num1" style="width:50px;" id="Number1">

        <input type ="text" id="num2" style="width:50px;" id="Number2">

        <input type="button" value="Calculate" id="submitButton"         
onClick="Calc()">

    </body>

</html>

(Type 2 Numbers and it's will Type the Answer (x + y)) The Problem is It's Typing it As a String: in The First Textbox the Number is 5 and in the second it's 5 too then when the Calculate Button is Pressed, it's will show

The Answer is: 55 and not 10...

So what you need to do is this:

ParseInt(document.getElementById("num1").value);
ParseInt(document.getElementById("num2").value);

and not

document.getElementById("num1");
document.getElementById("num2");

in the var num1a and num2a. That's will Fix the Problem :)

answered May 8, 2015 at 16:52

Eldar B.

1,38912 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eldar B. Over a year ago

For some Reason it's NOT WORKING I don't know why, Can you help?

Yussuf S · Accepted Answer · 2013-09-20 02:28:17Z

0

see this fiddle for your answer.

Your answer span was incorrectly named 'answer' and not 'Answer'
Your Drop Down did not have values assigned to the options.
You needed to Parse the Integer Values before assigning the span text.
Instead of using document.getElementById('Answer').value = answer; you should use document.getElementById('Answer').innerHTML = answer;

edited Sep 20, 2013 at 2:28

answered Sep 20, 2013 at 2:18

Yussuf S

2,1421 gold badge14 silver badges12 bronze badges

3 Comments

Mohsen Maesumi Over a year ago

It still did not display the answer.

Yussuf S Over a year ago

changed my answer. see the fiddle.

Yussuf S Over a year ago

No Problem @MohsenMaesumi, don't forget to select this as the answer to your question ! :)

Techsin · Accepted Answer · 2013-09-20 02:25:11Z

0

i found two errors.

Capital A in document.getElementById('Answer'). When it should be document.getElementById('answer'). As the name of the id is in also small a.
instead of .value = answer it should be .textContent = answer or innerText/innerHtml.

Demo: http://jsfiddle.net/techsin/uVpxr/

answered Sep 20, 2013 at 2:25

Techsin

5425 silver badges18 bronze badges

Comments

cocco · Accepted Answer · 2013-10-31 13:59:42Z

Very Simple Calculator (html5 css3 js)

js

function calc(e){
 var a=e.target.innerText,b=this.firstChild;
 b.value=a=='='?eval(b.value):a=='C'?'':b.value+a;
}
var gui=document.createElement('div');
gui.className='clc';
gui.innerHTML='<input><div>'+('789+456-123*C0./='.split('').join('</div><div>'))+'</div>';
gui.addEventListener('click',calc,false);

window.onload=function(){
 document.body.appendChild(gui);
}

css3

body,html{
 height:100%;
 margin:0;
 padding:0;
 background-color:#666;
}
*{
 box-sizing:border-box;
}
.clc{
 width:256px;
 height:320px;
 clear:both;
}
.clc>*{
 border:4px solid #666;
 border-radius:4px;
 font:normal normal bold 20px/56px Arial,Helvetica,sans-serif;
 border-radius:10px;
}
.clc>input{
 width:100%;
 height:20%;
 text-align:right;
 padding:0 20px;
}
.clc>div{
 width:25%;
 height:20%;
 background-color:#5a5a5a;
 color:#fff;
 text-align:center;
 float:left;
}
.clc>div:nth-child(4n+1){
 background-color:#f36573;
}
.clc>div:nth-last-child(1){
 width:100%;
 background-color:#ffb343;
}

example

http://jsfiddle.net/trjsJ/

Collectives™ on Stack Overflow

Simple HTML/JavaScript calculator not working?

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related