网页计算器 HTML+CSS+js 出现[object HTMLInputElement]

最新推荐文章于 2022-11-20 16:51:54 发布

dear6

最新推荐文章于 2022-11-20 16:51:54 发布

阅读量653

点赞数 1

分类专栏： html 文章标签：前端 html css javascript [object HTMLInputElement]

本文链接：https://blog.csdn.net/weixin_45130905/article/details/95199464

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

计算器

今天写了个小的网页计算器

<html>
	<head>
		<title>js计算器</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
			#showdiv{
				 border: solid 1px;
				 border-radius: 10px;/*设置边框角度*/
				 width: 320px;
				 height: 400px;
				 text-align: center;
				 margin: auto;
				 margin-top: 50px;
				 background-color: lemonchiffon;
			}
			input[type=text]{
				margin-top:20px ;
				width: 290px;
				height: 40px;
				font-size: 25px;
			}
			input[type=button]{
				width: 60px;
				height: 60px;
				margin-top: 20px;
				margin-left: 5px;
				margin-right: 5px;
				font-size: 30px;
				font-weight: bold;
			}
		</style>
		<!--声明js代码域-->
		<script type="text/javascript">
			/*声明函数*/
			function test(btn){
				/*获取按钮对象的value值*/
				var num=btn.value;
				/*将按钮的value值赋给text*/
				
				/*根据用户点击动作执行对应业务逻辑*/
				switch (num){
					case "=":
					
						document.getElementById("inp").value=eval(document.getElementById("inp").value)/*eval()方法可以把传入的字符串进行运算*/
						break;
					case "c":
					
					 	document.getElementById("inp").value="";
						break;
					default:
						document.getElementById("inp").value=document.getElementById("inp").value+num;
						break;
				}
				
				}
			
			
		</script>
	</head>
	<body>
		<div id="showdiv">
			<input type="text" name="" id="inp" value="" readonly="readonly"/><br />
			<input type="button" name="" id="" value="0" onclick="test(this)"/>
			<input type="button" name="" id="" value="1" onclick="test(this)"/>
			<input type="button" name="" id="" value="2" onclick="test(this)"/>
			<input type="button" name="" id="" value="3" onclick="test(this)"/><br />
			<input type="button" name="" id="" value="4" onclick="test(this)"/>
			<input type="button" name="" id="" value="5" onclick="test(this)"/>
			<input type="button" name="" id="" value="6" onclick="test(this)"/>
			<input type="button" name="" id="" value="7" onclick="test(this)"/><br />
			<input type="button" name="" id="" value="8" onclick="test(this)"/>
			<input type="button" name="" id="" value="9" onclick="test(this)"/>
			<input type="button" name="" id="" value="+" onclick="test(this)"/>
			<input type="button" name="" id="" value="-" onclick="test(this)"/><br />
			<input type="button" name="" id="" value="*" onclick="test(this)"/>
			<input type="button" name="" id="" value="/" onclick="test(this)"/>
			<input type="button" name="" id="" value="c" onclick="test(this)"/>
			<input type="button" name="" id="" value="=" onclick="test(this)"/>
		</div>
	</body>
</html>

效果如下

在这里插入图片描述

出现的问题

运用eval()方法时运算结果不对结果显示为[object HTMLInputElement]
在这里插入图片描述

解决

仔细看代码时发现运用eval时没有获取value！！！！！

case "=":
			document.getElementById("inp").value=eval(document.getElementById("inp")
			/*eval()方法可以把传入的字符串进行运算*/
			break;

应该这样

应该是

eval(document.getElementById("inp").value)

就是这样

case "=":
						document.getElementById("inp").value=eval(document.getElementById("inp").value)
						/*eval()方法可以把传入的字符串进行运算*/
						break;

dear6

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页计算器 HTML+CSS+js 出现[object HTMLInputElement]

计算器今天写了个小的网页计算器<html> <head> <title>js计算器</title> <meta charset="UTF-8"/>  <style type="text/css"> #showdiv{ border: solid 1...
复制链接

扫一扫