利用JavaScript实现加减乘除及遇到的相关问题

最新推荐文章于 2023-04-15 06:57:58 发布

AiryWinter

最新推荐文章于 2023-04-15 06:57:58 发布

阅读量907

点赞数 1

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/AiryWinter/article/details/80329478

版权

作为一个刚开始学JavaScript的小菜鸟，希望和大家分享一下在学习中遇到的问题，这算是我写的第一个js小程序吧，虽然很小很简单，但是在实现的过程中遇到了很多问题。

问题一：

if(document.getElementId(first-name).onclick)

当我试图用连续几个if.....else if语句来判断button是否被点击时，出现错误。原因在于事件处理函数的onclick的返回值并不是简单的true或者false。这也反映出我写代码的过程中逻辑十分不严谨。解决方法见链接：点击打开链接

问题二：

document.getElementId(first-name).value获取的是字符串，如果想进行加法，需要使用parseInt()等函数转换成数值型，进行减法、乘法、除法则不必。

问题三：

一个很菜鸟但是我研究了半天的问题......一开始我给a、b直接赋值了document.getElementId("").value，然后发现一直赋值不成功，a、b一直等于0。终于我找到了一个思否的问题：点击打开链接。也就是说我没有理解：JavaScript脚本在浏览器上是加载完成后立即运行的。（我这理解能力），其他具体内容如果有人看我博文的话就移步链接吧~我只是只小菜鸟搬运工~

最后上我写的不怎么规范好看的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScript</title>
</head>
<body>        
    <input id="first-number" type="number" value="0" placeholder="第一个数字">
    <input id="second-number" type="number" value="0" placeholder="第二个数字">
    <button id="add-btn">加</button>
    <button id="minus-btn">减</button>
    <button id="times-btn">乘</button>
    <button id="divide-btn">除</button>
    <p id="result">运算结果</p>
    <script>
            var a = document.getElementById("first-number");
            var b = document.getElementById("second-number");
            var btn1 = document.getElementById("add-btn");
            var btn2 = document.getElementById("minus-btn");
            var btn3 = document.getElementById("times-btn");
            var btn4 = document.getElementById("divide-btn");
            btn1.onclick = function(){
                document.getElementById("result").innerHTML = parseInt(a.value) + parseInt(b.value);
            }
            btn2.onclick = function(){
                document.getElementById("result").innerHTML = a.value - b.value;
            }
            btn3.onclick = function(){
                document.getElementById("result").innerHTML = a.value * b.value;
            }
            btn4.onclick = function(){
                document.getElementById("result").innerHTML = a.value / b.value;
            }
    </script>
</body>
</html>