获取input标签里面的数字然后相加的一种方法

最新推荐文章于 2024-08-13 10:25:16 发布

执~漠

最新推荐文章于 2024-08-13 10:25:16 发布

阅读量7.7k

点赞数 4

本文链接：https://blog.csdn.net/weixin_44116816/article/details/94574644

版权

开发工具与关键技术：js
作者：执~漠
撰写时间：2019年7月3日星期三

如果你要获取到input标签里面的值然后相加时你的代码可能是这样写的

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>加减乘除</title>
</head>
<body>
    <div >
        <input type="text" id="A"/>
        <input type="text" id="B" />
<button id="btn" onclick="jia();">确定</button>
    </div>
<script>
    function jia() {
//value是获取到input里面输入的值
        var a = document.getElementById("A").value;
        var b = document.getElementById("B").value;
        var E = a + b;
        console.log(E);
    };
</script>
</body>
</html>

但是他出来的效果却是这样的
在这里插入图片描述
结果却是把数字当成字符串然后“+”就是字符串的拼接。
加上“parseFloat（）”这个函数后，代码如下：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>加减乘除</title>
</head>
<body>
    <div >
        <input type="text" id="A"/>
        <input type="text" id="B" />
<button id="btn" onclick="jia();">确定</button>
    </div>
<script>
    function jia() {
//value是获取到input里面输入的值
        var a = parseFloat(document.getElementById("A").value);
        var b = parseFloat(document.getElementById("B").value);
        var E = a + b;
        console.log(E);
    };
</script>
</body>
</html>

结果不就是你想要的吗？
在这里插入图片描述

javaScript中加减乘除都要通过一些方法来将你获取到的数字转换为代码认为的数字

var a = parseFloat(10);
    var b = parseFloat(20);
    var d = a + b;
    var c = b - a;
    var e = a * b;
    var t = b / a;
    console.log("加" + d, "减" + c, "乘" + e, "除" + t);

下面的var因为本来就是数字所有可以直接相加

    var o = 10;
    var i = 10;
    var w = o + i;
    console.log(w);

他们的效果如下
在这里插入图片描述

执~漠

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫