0

I programmed a calculator and when you click the button to insert text it doesn't insert text into the box. Plese help me find the issue. Here is the code:

<html>
<head>
<style type=text/css>
#calculator{
    margin-top:10%;
    margin-left:37%;
    background:cyan;
    color:black;
    height:350px;
    width:350;
    padding:50px;
    text-align:center;
    border:5px dashed blue;
}
#calculator b{
    color:black;
}

</style>
<script type="text/javascript" language="javascript">
var num1 = getElementById("number1");
var num2 = getElementById("number2").value;;
var op = getElementById("operation").value;;
var ans = getElementById("answer").value;
function type1(){
    if(num1 != ""){
        num1 = "1";
    }
}
</script>
</head>
<body>
<div id=calculator>
<center>
<table>
<tr><td><input type="text" value=""  placeholder="Number 1"  id="number1"   readonly="readonly" maxlength="1" tabindex="1"/></td></tr><tr><td>
<input type="text" value=""  placeholder="Operation" id="operation" maxlength="1" readonly="readonly" tabindex="2"/></td></tr><tr><td>
<input type="text" value=""  placeholder="Number 2"  id="number2"   maxlength="1" readonly="readonly" tabindex="3"/><b>=</b></td></tr><tr><td>
<input type="text" value=""  placeholder="Answer"    id="answer"    tabindex="4"   readonly="readonly"/></td></tr>
<table>
<tr><td><input type="button" value="1" onClick="type1()"</td><td><input type="button" value="2" onClick="type2()"</td><td><input type="button" value="3" onClick="type3()"</td></tr>
<tr><td><input type="button" value="4" onClick="type4()"</td><td><input type="button" value="5" onClick="type5()"</td><td><input type="button" value="6" onClick="type6()"</td></tr>
<tr><td><input type="button" value="7" onClick="type7()"</td><td><input type="button" value="8" onClick="type8()"</td><td><input type="button" value="9" onClick="type9()"</td></tr>
<tr><td><input type="button" value="- " onClick="type-()"></td><td><input type="button" value="0" onClick="type0()"></td><td><input type="button" value="+" onClick="type+()"></td></tr>
<tr><td><input type="button" value="X" onClick="typeX()"></td><td><input type="button" value="=" onClick="type=()"></td><td><input type="button" value="/ " onClick="type/()"></td></tr>
</table>
<p><b>NOTE:</b>This widget does not support negative numbers.</p>
</center>
</div>
</body>
</html>

Here it is in action: http://test342.coffeecup.com/LearningJavascript.html Thank You for the help!

1
  • please open the developer console in your browser. there you can see a lot of errors that you can correct easily. for example: document.getElementById not only getElementById, or: type2 is not defined...
    – michael
    Jan 5, 2014 at 20:14

2 Answers 2

1

1 Replace var num1 = getElementById("number1"); with var num1 = getElementById("number1").value;

For the other buttons, there are no functions defined for them.

2 Replace getElementById with document.getElementById (just adding this, Bigood had it first.)

0
1

First, getElementById() is a method of document object.

Use document.getElementById() instead (see reference).

Secondly, you shouldn't declare one function for each button: you'd rather use one function for each type of interaction, as number and operation.

Then, in your onclick attributes, use the correct function to call, and change the focused input if an operation is done.

Thirdly, don't use semicolons twice, it isn't safer :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.