<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="content">
<select>
<option value="+">+</option>
<option value="-">-</option>
<option value="×">×</option>
<option value="÷">÷</option>
</select>
<input type="text" name="content">
<button>=</button>
<span>计算的结果是:0</span>
</body>
<script>
// 1.获取元素
var inp = document.getElementsByName('content')
var select = document.getElementsByTagName('select')[0]
var btn = document.getElementsByTagName('button')[0]
var span = document.querySelector('span')
console.log(inp, select, btn, span);
btn.onclick = function () {
// console.log(inp[0].value,inp[1].value,select.value);
// console.log(typeof(select.value));
// console.log(typeof(inp[0].value));
// NaN不等于NaN NaN+''==NaN+''
console.log(Number(inp[0].value)+''==NaN+'');
// 1.输入的内容不能为空
if (inp[0].value === "" || inp[1].value === "") {
alert("输入的内容不能为空哦!")
} else if (Number(inp[0].value)+''==NaN+''||Number(inp[0].value)+''==NaN+'') {
// 2.输入的内容必须是数字
alert("输入的不是数字 计算个锤子啊!")
} else {
// 3.正常情况
// 将表单获取的值转为数字
var x = inp[0].value * 1
var y = inp[1].value * 1
// console.log(x);
// console.log(y);
// 判断你选择的运算符
switch (select.value) {
case '+':
span.innerHTML = '计算的结果是:' + (x + y)
break;
case '-':
span.innerHTML = '计算的结果是:' + (x - y)
break;
case '×':
span.innerHTML = '计算的结果是:' + (x * y)
break;
case '÷':
span.innerHTML = '计算的结果是:' + (x / y)
break;
default:
break;
}
}
}
</script>
</html>
10-22
02-06
08-16
1318