<!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>计算器</title>
</head>
<body>
<h1>JavaScript简易计算器</h1>
<input type="text" name="valueone" id='valueone' class="valueone" placeholder="请输入第一个参数">
<select id="cal">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%"> % </option>
</select>
<input type="text" id="valuetwo" name="valuetwo" placeholder="请输入第二个参数">
<input type="text" value="=" style="width: 20px;" disabled>
<input type="text" value="" id="res" placeholder="此处显示结果">
<br> <br>
<button id="cal" onclick="cal()"> 计算</button>
</body>
</html>
function cal(){
let valueone =Number( document.getElementById('valueone').value);
let valuetwo =Number( document.getElementById('valuetwo').value);
let cal = document.getElementById('cal').value;
if(isNaN(valueone) || isNaN(valuetwo)){
alert('请输入有效的数字');
}
if(valueone == null || valuetwo == null){
alert('输入的数字不能为空')
}
if(cal == '/' || cal == '%' ){
if(valuetwo == 0){
alert('除数不能为零')
}
}
let result = 0;
switch(cal){
case '+' :
result = (valueone + valuetwo);
break;
case '-':
result = valueone - valuetwo;
break;
case '*':
result = valueone * valuetwo;
break;
case '/':
result = valueone / valuetwo;
break;
case '%':
result = valueone % valuetwo;
break;
}
document.getElementById('res').innerText.value = result ;
}
经验总结:
1.js中进行数学运算要强制转换数据类型,因为+号也有字符串链接的作用,若不转为数字,会当作字符串进行操作
2.输出到文本框的innerText 用法需要在熟悉下.不知道什么原因,输入不到文本框中.
可以的话麻烦老师看下什么原因导致的