用JS实现简单计算器的坑
程序员文章站
2022-03-03 22:08:55
...
HTML代码
<!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>
JS代码:
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 用法需要在熟悉下.不知道什么原因,输入不到文本框中.
可以的话麻烦老师看下什么原因导致的