JS实时获取输入框里的值

最新推荐文章于 2023-10-19 09:32:14 发布

原创最新推荐文章于 2023-10-19 09:32:14 发布 · 1.3w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端开发 #JavaScript

JavaScript 学习笔记同时被 2 个专栏收录

18 篇文章

订阅专栏

前端开发

16 篇文章

订阅专栏

<div>
    <span>值1：</span>
    <input id="input1" type="text />
</div>
<div>
    <span>值2：</span>
    <input id="input2" type="text />
</div>
<div>
    和是：
    <span  id="amount”>0</span>
</div>

var oInp1 = document.getElementById("input1");
var oInp2 = document.getElementById("input2");
var oAmount = document.getElementById("amount");

if("oninput" in oInp1){
    oInp1.addEventListener("input",getWord,false);
} else {
    oInp1.onpropertychange = getWord;
}
if("oninput" in oInp2){
    oInp2.addEventListener("input",getWord,false);
} else {
    oInp2.onpropertychange = getWord;
}
//判断值是否为空，怎么显示，避免出现“NaN”
function getWord(){
        if(oInp1.value == "" && oInp2.value == "") {
            oAmount.innerHTML = "0";
        } else if (oInp2.value == "") {
            oAmount.innerHTML = "0";
        } else if(oInp1.value == ""){
            oAmount.innerHTML = parseInt(oInp2.value)
        } else {
            oAmount.innerHTML = parseInt(oInp2.value) + parseInt(oInp1.value);
        }