点击按钮增加或减少本文框的数字

最新推荐文章于 2023-06-23 08:48:45 发布

otatoz

最新推荐文章于 2023-06-23 08:48:45 发布

阅读量4.8k

点赞数 2

分类专栏：公司相关文章标签： js jquery 自增

本文链接：https://blog.csdn.net/qq_42720683/article/details/88060624

版权

公司相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果：

点击 + 号按钮，每次点击数字加1 ；点击 - 按钮，每次点击数字减1。

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试代码</title>
</head>
<body>

<input type="text" value="1" class="xpf" name="wsxpf" id="txt">
<input type="button" onclick="add()" value="+"><input type="button" onclick="sub()" value="-"></td>

<script>
    // 三种选中input框的方式，可以通过控制台查看输出结果
    var a = document.getElementsByClassName("xpf")[0];
    console.log('-----',a);
    var b = document.getElementsByName("wsxpf")[0];
    console.log('-----',b);
    var c = document.getElementById("txt");
    console.log('-----',c);

    // 增加
    function add(){
        var txt = document.getElementsByClassName("xpf")[0];
        var a = txt.value;
        a++;
        txt.value = a;
    }
    
    // 减少
    function sub(){
        var txt = document.getElementsByClassName("xpf")[0];
        var a = txt.value;
        if(a>1){
            a--;
            txt.value = a;
        }else{
            txt.value = 1;
        }
        
    }
</script>
</body>
</html>

非常简单的代码。但是这只实现了一个input框中数字的增减，如果是多个input框，如何实现。

这里我有另一种解决办法（事件代理），代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<div class="content">
    <input class="xpf" type="button" value="1">
    <input class="xpf" type="button" value="1">
    <input class="xpf" type="button" value="1">
</div>

</body>
<script>
    $(function(){
        // 增加
	$('.content').on({
	    click:function(event){
                //event.target代表当前点击元素
	    	console.log(event.target);
		event.target.value ++ ;
            }
	},'.xpf');
    })
</script>
</html>

效果：点击哪一个，那一个input里的数就会加1

-----------------本文完-----------------

otatoz

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
点击按钮增加或减少本文框的数字

效果：点击 + 号按钮，每次点击数字加1 ；点击 - 按钮，每次点击数字减1。整体代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;测试代码&lt;/...
复制链接

扫一扫