用JS实现简单计算器的坑

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 用法需要在熟悉下.不知道什么原因,输入不到文本框中.

可以的话麻烦老师看下什么原因导致的

HTML代码

JS代码:

更多相关文章

随机推荐