CODEWITHSUNDEEP
javascripthtmlcsscalculator
craig doyle
craig doyle

Reputation: 3

my javascript calculator wont work

Whenever I add the div box containing all the inputs they just stop working can someone please help. The div box is the only way I could think of to keep the inputs in that layout. I'm still very new to javascript and integrating it into html. Thank you for reading.

#ans_box {
width:500px;
height:30px;
background-color:silver;
position:relative;
margin-bottom:90%;
}
#demo {
position:relative;
width:500px;
height:30px;
}
.button {
position:relative;
margin-right:1%;
border-radius:12px;
border-color:green;
background-color:white;
font-size:30px;
z-index:-1;
float:left;
padding:5px 8px;
}
.button2 {
position:relative;
margin-right:1%;
border-radius:12px;
border-color:green;
background-color:white;
font-size:30px;
float:left;
margin-top:6%;
margin-right:1%;
z-index:-2;
padding:5px 8px;
}
.button3 {
position:relative;
margin-right:1%;
border-radius:12px;
border-color:green;
background-color:white;
font-size:30px;
z-index:-3;
padding:5px 8px;
}
.button4 {
position:relative;
margin-right:1%;
border-radius:12px;
border-color:green;
background-color:white;
font-size:30px;
float:left;
z-index:-4;
padding:5px 8px;
}
#boundry{
width:180px;
height:500px;
}
<!DOCTYPE html>
<html>
<body>
<form name="calculator" >
<div id="boundry">
<input class="button" type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input class="button" type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input class="button" type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input class="button" type="button" value="+" onClick="document.calculator.ans.value+='+'">

<input class="button2" type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input class="button2" type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input class="button2" type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input class="button2" type="button" value="-" onClick="document.calculator.ans.value+='-'">

<input class="button3" type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input class="button3" type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input class="button3" type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input class="button3" type="button" value="*" onClick="document.calculator.ans.value+='*'">

<input class="button4" type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input class="button4" type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input class="button4" type="reset" value="Reset">

<input class="button" type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<input type="textfield" name="ans" value="">
</div>
</form>
</body>
</html>

Upvotes: 0

Views: 121

Answers (2)

mrjvs
mrjvs

Reputation: 39

Your javascript and HTML code works absolutely perfect, there is nothing wrong with that.
The problem is the CSS.
The all 4 button classes have a z-index: value;
This is making all buttons unclickable. Removing the css will make the calculator work perfectly.

To make you learn a bit more about javascript I will teach you something about functions. they are pieces of javascript code that can be rerun with a simple line.
In your case:

<script>
    function setToAns(element) {
        document.calculator.ans.value += element.value;
    }
</script>


if you add this to your html it will do nothing. but if you add it to your buttons.

<input class="button" type="button" value="1" onClick="setToAns(this);">

It will run the function. You can use this as the normal buttons (not the = button)(this in onclick is the element it is run from).
I hope this helped.

Upvotes: 0

Minar_Mnr
Minar_Mnr

Reputation: 1405

Actually your click was working .... but because of using z-index it was not showing . Here is a fiddle link ... which is working. And for your convenience ..here is HTML Code: 

 <form name="calculator" >
 <div id="boundry">
 <input class="button" id="box" type="button" value="1" 
 onClick="document.calculator.ans.value+='1'">
 <input class="button" id="box" type="button" value="2" 
 onClick="document.calculator.ans.value+='2'">
 <input class="button" id="box" type="button" value="3" 
 onClick="document.calculator.ans.value+='3'">
 <input class="button" id="box" type="button" value="+" 
 onClick="document.calculator.ans.value+='+'">

 <input class="button" id="box1" type="button" value="4" 
 onClick="document.calculator.ans.value+='4'">
 <input class="button6" id="box1" type="button" value="5" 
 onClick="document.calculator.ans.value+='5'">
 <input class="button7" id="box1" type="button" value="6" 
 onClick="document.calculator.ans.value+='6'">
     <input class="button8" id="box1" type="button" value="-" onClick="document.calculator.ans.value+='-'">

<input class="button9" id="box3" type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input class="button10" id="box3" type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input class="button11" id="box3" type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input class="button12" id="box3" type="button" value="*" onClick="document.calculator.ans.value+='*'">

<input class="button13" id="box4" type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input class="button14" id="box4" type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input class="button15" id="box4" type="reset" value="Reset">

<input class="button" id="box4" type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<input type="textfield" name="ans" value="">
</div>
</form>

And CSS : 

#ans_box {
width:500px;
height:30px;
background-color:silver;
position:relative;
margin-bottom:90%;
}
#demo {
position:relative;
width:500px;
height:30px;
}
#box {
position:relative;
margin-right:1%;
border-radius:12px;
border-color:green;
background-color:white;
font-size:30px;

float:left;
padding:5px 8px;
}
#box1 {
position:relative;
margin-right:1%;
border-radius:12px;
border-color:green;
background-color:white;
font-size:30px;
float:left;
margin-top:6%;
margin-right:1%;

padding:5px 8px;
}
#box3 {
position:relative;
margin-right:1%;
border-radius:12px;
border-color:green;
background-color:white;
font-size:30px;

padding:5px 8px;
}
#box4 {
position:relative;
margin-right:1%;
border-radius:12px;
border-color:green;
background-color:white;
font-size:30px;
float:left;

padding:5px 8px;
}
#boundry{
width:180px;
height:500px;
}

A little modification in your css and html ... add another id to understand clearly .

Upvotes: 3

Related Questions