JavaScript学习笔记5-6_点击按钮调用calc函数js-CSDN博客

本文链接：https://blog.csdn.net/weixin_38720471/article/details/109136574

JS制作计算器

<html>
<head>
	<meta charset="UTF-8">
	<title>计算器</title>
	<script type="text/javascript">
		function calc(){
			//获取两个操作数和运算符
			var n1=document.getElementById("num1").value;
			var n2=document.getElementById("num2").value;
			var oper=document.getElementById("oper").value;
			console.info(n1+" "+oper+" "+n2);
			//除数不能是0
			if(n2==0 && oper=='/'){
				document.getElementById("result").innerHTML
				='<span style="color:red;font-weight:bold;">除数不能为0</span>';
				return;//判断后一定要return;
			}
			//n1和n2都必须是数字
			if(isNaN(n1) || isNaN(n2)){
				document.getElementById("result").innerHTML
				='<span style="color:red;font-weight:bold;">两个都必须是数字</span>';
				return;
			}
			//进行运算
			var result;
			switch(oper){
				case "+":result=parseInt(n1)+parseInt(n2);break;
				case "-":result=n1-n2;break;
				case "*":result=n1*n2;break;
				case "/":result=n1/n2;break;
			}
			//输出结果
			document.getElementById("result").innerHTML=result;
			console.info("result="+result);
		}
	</script>
</head>
<body>
	<form action="">
		第一个数字：<input type="text" id="num1" name="num1" value="12"/><br>
		第二个数字：<input type="text" id="num2" name="mun2" /><br>
		运算符：<select id="oper" name="oper">
					<option value="+">加</option>
					<option value="-">减</option>
					<option value="*">乘</option>
					<option value="/">除</option>
				</select>
				<br>
		<input type="button" value="提交" onclick="calc()"/><!-- 点击按钮就运行calc（）函数 -->
	</form>
	<div id="result">结果：</div>	
	
</body>
</html>

注意点：
1.
采用button中的onclick(点击按钮)的方式，实现调用js中的calc()函数
2.
两个var的数相加，不能直接num1+num2;应该写成 parseInt(num1)+parseInt(num2)
3.
js获取表单中的数据： var n1=document.getElementById(“num1”).value;
4.
js中的数据显示到表单：document.getElementById(“result”).innerHTML= =‘两个都必须是数字’;