JS——实现文本框控制加减并抛出实时数值

版权声明:进击的葱 https://blog.csdn.net/qlwangcong518/article/details/86483599

描述:

JS——实现文本框控制加减并抛出实时数值

效果:

实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <button id="b1">+</button>
        <input name="text" id="bb" value="1">
        <button id="b2">-</button>
    </div>
    <script>
        init();
        function init() {
            var add=document.getElementById("b1");
            var sub=document.getElementById("b2");
            var text=document.getElementById("bb");

            add.addEventListener("click",clickButtonHandler);
            sub.addEventListener("click",clickButtonHandler);
            document.addEventListener("change",changeHandler);
        }

        function clickButtonHandler(e) {
            var evt=new Event("change");//本身的事件
            if(this.textContent=="+"){//获取点击属性为+时
                //nextElementSibling  下一个
                if(this.nextElementSibling.value==99) return;
                //给data.num赋值,一直加可以 小于100
                this.nextElementSibling.value++;
                evt.elem=this.nextElementSibling;//当前指向 对象
            }else{
                //previousElementSibling  上一个
                if(this.previousElementSibling.value==1) return;
                //给data.num赋值,减
                this.previousElementSibling.value--;
                evt.elem=this.previousElementSibling;//当前指向 对象
            }
            document.dispatchEvent(evt);//朝谁发送 抛发
        }

        function changeHandler(e) {
            console.log(e);
        }
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qlwangcong518/article/details/86483599