CODEWITHSUNDEEP
javascripthtmlcalculator
Mohsen Maesumi
Mohsen Maesumi

Reputation: 37

Simple HTML/JavaScript calculator not working?

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!

Upvotes: 0

Views: 4901

Answers (4)

Eldar B.
Eldar B.

Reputation: 1347

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

Upvotes: 1

cocco
cocco

Reputation: 16716

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/

Upvotes: 0

Yussuf S
Yussuf S

Reputation: 2112

see this fiddle for your answer.

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

Upvotes: 0

Techsin
Techsin

Reputation: 532

i found two errors.

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

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

Upvotes: 0

Related Questions