javascript与浏览器页面交互

candy_soft 2017-12-25 08:04:01

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
数字1：<input type="number" name="num1" id="num1"/>
符号：<input type="text" name="sign" id="sign"/>
数字2;<input type="number" name="num2" id="num2"/>
结果：<input type="number" name="result" id="result"/>
</div>
<script>

function result(sign,num1,num2){
var sum =sum||0;
switch(sign)
{
case "+":
sum = add(num1,num2);
break;
case "-":
sum = sub(num1,num2);
break;
case "*":
sum = product(num1,num2);
break;
case "/":
sum = division(num1,num2);
break;
default:
console.log("不属于四则运算！！！");
// break;
}
return sum;
}
function add(num1,num2){
return num1 + num2;
};
function sub(num1,num2){
return (num1>num2)?(num1-num2):(num2-num1);
};
function product(num1,num2){
return num1*num2;
};
function division(num1,num2){
return (num1>num2)?(num1/num2):(num2/num1);
};

var sign = document.getElementById("sign").value;
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;

x = result(sign,num1,num2);
document.getElementById("result").value = x;
console.log(x)
</script>
</body>
</html>
求教为什么执行布成功？在浏览器页面输入相应的值之后，为什么得不到我想要的结果？

...全文

218 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

candy_soft 2017-12-25

打赏
举报

引用 1 楼天际的海浪的回复:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			数字1：<input type="number" name="num1" id="num1"/>
			符号：<input type="text" name="sign" id="sign"/>
			数字2;<input type="number" name="num2" id="num2"/>
			结果：<input type="number" name="result" id="result"/>
		</div>
		<script>
			
			function result(sign,num1,num2){
				var sum = 0;
				switch(sign)
				{
					case "+":
							sum = add(num1,num2);
							break;
					case "-":
							sum = sub(num1,num2);
							break;
					case "*":
							sum = product(num1,num2);
							break;
					case "/":
					        sum = division(num1,num2);
							break;
					default:
							console.log("不属于四则运算！！！");
//							break;
				}
				return sum;
			}
			function add(num1,num2){
				return num1 + num2;
			};
			function sub(num1,num2){
				return (num1>num2)?(num1-num2):(num2-num1);
			};
			function product(num1,num2){
				return num1*num2;
			};
			function division(num1,num2){
				return (num1>num2)?(num1/num2):(num2/num1);
			};
			
			var sign = document.getElementById("sign");
			var num1 = document.getElementById("num1");
			var num2 = document.getElementById("num2");
			sign.oninput = num1.oninput = num2.oninput = function () {
				var x = result(sign.value,parseFloat(num1.value)||0,parseFloat(num2.value)||0);
				document.getElementById("result").value = x;
			}
		</script>
	</body>
</html>

先谢谢你，代码执行成功，我自己再琢磨一下，比对比对

天际的海浪 2017-12-25

打赏
举报


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			数字1：<input type="number" name="num1" id="num1"/>
			符号：<input type="text" name="sign" id="sign"/>
			数字2;<input type="number" name="num2" id="num2"/>
			结果：<input type="number" name="result" id="result"/>
		</div>
		<script>
			
			function result(sign,num1,num2){
				var sum = 0;
				switch(sign)
				{
					case "+":
							sum = add(num1,num2);
							break;
					case "-":
							sum = sub(num1,num2);
							break;
					case "*":
							sum = product(num1,num2);
							break;
					case "/":
					        sum = division(num1,num2);
							break;
					default:
							console.log("不属于四则运算！！！");
//							break;
				}
				return sum;
			}
			function add(num1,num2){
				return num1 + num2;
			};
			function sub(num1,num2){
				return (num1>num2)?(num1-num2):(num2-num1);
			};
			function product(num1,num2){
				return num1*num2;
			};
			function division(num1,num2){
				return (num1>num2)?(num1/num2):(num2/num1);
			};
			
			var sign = document.getElementById("sign");
			var num1 = document.getElementById("num1");
			var num2 = document.getElementById("num2");
			sign.oninput = num1.oninput = num2.oninput = function () {
				var x = result(sign.value,parseFloat(num1.value)||0,parseFloat(num2.value)||0);
				document.getElementById("result").value = x;
			}
		</script>
	</body>
</html>