前端学习之项目三-CSDN博客

本文链接：https://blog.csdn.net/Insomniacolo/article/details/118577906

要求：

运用DOM完成网页计算器应用

简易版:

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Count</title>

</head>
<style>

    *{
    text-align: center;
    }
    #btn{
        margin-top: 20px;
    }
</style>
<body>

    <!--第一个框-->
<input type="text" id="firstbt" typeof="submit" onchange="getValueF()">
<select id="selectbt" onchange="getValueb()">
    <!--第二个框（选择框）-->
    <option value ="">请选择</option>
    <option id="jia" value ="jia">+</option>
    <option value ="jian">-</option>
    <option value="cheng">*</option>
    <option value="chu">/</option>
</select>
    <!--第三个框-->
<input type="text" id="secondbt" onchange="getValueS()">
<span>=</span>
    <!--第四个框-->
<input type="text" id="thirdbt">
<!--<div><button id="count" type="submit" onclick="click()">计算</button></div>-->
<div><input id="btn" value="计算" type="button" ></div>

<script>
    function getValueF() {
        firstN=document.getElementById("firstbt").value;
        return firstN;
    }
    var secondN;
    function getValueS() {
        secondN=document.getElementById("secondbt").value;
        return secondN;
    }
    var selectb;
    function getValueb(){
        selectb = document.getElementById("selectbt").value;
        return selectb;
    }


    //点击事件
    document.getElementById("btn").addEventListener("click",function () {
        let number1 = parseInt(firstN);
        let number2 = parseInt(secondN);
        var number3;
        if (selectb=="jia"){
            var number3=number1+number2;
           document.getElementById("thirdbt").value = number3;
        }else if (selectb=="jian"){
            number3=number1-number2;
            document.getElementById("thirdbt").value = number3;
        }else if (selectb=="cheng"){
            number3=number1*number2;
            document.getElementById("thirdbt").value = number3;
        }else if (selectb=="chu"){
            number3=number1/number2;
            document.getElementById("thirdbt").value = number3;
        }

    })

</script>
</body>
</html>