我的JavaScript计算器无法正常工作
[英]my javascript calculator wont work
问题描述
Whenever I add the div box containing all the inputs they just stop working can someone please help. 
每当我添加包含所有输入的div框时，它们都将停止工作，请有人帮忙。 The div box is the only way I could think of to keep the inputs in that layout. div框是我想到的将输入保持在该布局中的唯一方法。 I'm still very new to javascript and integrating it into html. 我对javascript并将其集成到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>
2 个解决方案
解决方案1
3 已采纳 2017-06-10 19:18:27
Actually your click was working .... but because of using z-index it was not showing . 实际上，您的点击有效。.但是由于使用了z-index，因此未显示。 Here is a fiddle link ... which is working. 这是一个小提琴链接 ...正在工作。 And for your convenience ..here is HTML Code: 为了您的方便..这里是HTML代码：
<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 : 和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 . 在css和html中进行一些修改...添加另一个id以便清楚地理解。
解决方案2
0 2017-06-10 19:22:34
Your javascript and HTML code works absolutely perfect, there is nothing wrong with that. 您的javascript和HTML代码绝对完美，这没有错。
The problem is the CSS. 问题是CSS。
The all 4 button classes have a z-index: value; 所有4个按钮类都有一个z-index: value;
This is making all buttons unclickable. 这使得所有按钮都无法单击。 Removing the css will make the calculator work perfectly. 卸下css将使计算器工作正常。
To make you learn a bit more about javascript I will teach you something about functions. 为了让您学习更多有关javascript的知识，我将教您一些有关函数的知识。 they are pieces of javascript code that can be rerun with a simple line. 它们是可以用简单的一行重新运行的javascript代码。
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. 如果将其添加到您的html中，它将什么都不做。 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). 可以使用此作为正常按钮（未=按钮）（ this在的onclick是它是从运行元素）。
I hope this helped. 希望对您有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.