CODEWITHSUNDEEP
javascripthtmlcalculator
cobo16
cobo16

Reputation: 21

Why won't this button alter the text box?

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!

Upvotes: 0

Views: 81

Answers (2)

Maen
Maen

Reputation: 10698

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

Upvotes: 1

Abraham Hamidi
Abraham Hamidi

Reputation: 13809

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

Upvotes: 1

Related Questions