如何用JavaScript实现同class按钮控制对应文本框数值增减

首先，你遇到的问题其实是JavaScript里var变量的作用域和闭包导致的，另外你的循环范围也没覆盖到所有5组按钮，咱们一步步来理清楚：

问题原因 #

1. var的作用域问题：你用var i声明循环变量，它是全局作用域的变量，循环结束后i的值会变成4（因为循环条件是i <= 3，最后一次循环i自增到4才退出）。当你点击按钮触发Dec或Inc函数时，函数里的i引用的是这个全局的i，所以每次都会修改x[4]（也就是最后一个输入框）。
2. 循环范围不足：页面里有5组按钮，但你的循环只处理了i=0到i=3，最后一组按钮根本没绑定点击事件。

解决方案 #

这里给你两种常用的解决思路，第二种更适合购物车这种动态场景：

方法1：用let代替var（ES6+） #

let有块级作用域，每次循环都会创建一个独立的i变量，事件函数会捕获当前循环的i值，不会出现引用同一个变量的问题：

var dec = document.getElementsByClassName("dec_button"); 
var inc = document.getElementsByClassName("inc_button"); 
var x = document.getElementsByClassName("num"); 
// 改成i < dec.length，自动适配按钮数量，不用手动写固定数字
for (let i = 0; i < dec.length; i++) { 
    dec[i].addEventListener("click", Dec); 
    inc[i].addEventListener("click", Inc); 
    function Dec() { 
        // 这里的i是当前循环的独立变量，不会被后续循环覆盖
        x[i].value = Math.max(0, +x[i].value - 1); // 加Math.max防止数量变成负数
    } 
    function Inc() { 
        x[i].value = +x[i].value + 1; 
    } 
} 

方法2：通过DOM关系找到对应输入框（更灵活） #

不用依赖索引，直接通过按钮的兄弟元素找到对应的输入框，就算后续新增商品，也不用修改JS代码：

// 绑定所有减号按钮的点击事件
document.querySelectorAll(".dec_button").forEach(btn => {
    btn.addEventListener("click", function() {
        // 减号按钮的下一个兄弟就是对应的输入框
        const numInput = this.nextElementSibling;
        numInput.value = Math.max(0, +numInput.value - 1);
    });
});

// 绑定所有加号按钮的点击事件
document.querySelectorAll(".inc_button").forEach(btn => {
    btn.addEventListener("click", function() {
        // 加号按钮的前一个兄弟就是对应的输入框
        const numInput = this.previousElementSibling;
        numInput.value = +numInput.value + 1;
    });
});

这个方法的好处是，不管你页面里有多少组按钮，只要DOM结构保持（减号→输入框→加号），代码都能正常工作，不需要关心索引，也彻底避免了闭包问题。

你的原始代码和HTML（整理后） #

<input type="button" class="dec_button" value="-"> 
<input type="text" value="0" class="num"> 
<input type="button" class="inc_button" value="+"> 
<br> 
<hr> 
<input type="button" class="dec_button" value="-"> 
<input type="text" value="0" class="num"> 
<input type="button" class="inc_button" value="+"> 
<br> 
<hr> 
<input type="button" class="dec_button" value="-"> 
<input type="text" value="0" class="num"> 
<input type="button" class="inc_button" value="+"> 
<br> 
<hr> 
<input type="button" class="dec_button" value="-"> 
<input type="text" value="0" class="num"> 
<input type="button" class="inc_button" value="+"> 
<br> 
<hr> 
<input type="button" class="dec_button" value="-"> 
<input type="text" value="0" class="num"> 
<input type="button" class="inc_button" value="+"> 
<br> 
<hr>

var dec = document.getElementsByClassName("dec_button"); 
var inc = document.getElementsByClassName("inc_button"); 
var x = document.getElementsByClassName("num"); 
for (var i = 0; i <= 3; i++) { 
    dec[i].addEventListener("click", Dec); 
    inc[i].addEventListener("click", Inc); 
    function Dec() { 
        x[i].value -= 1; 
    } 
    function Inc() { 
        x[i].value = +x[i].value + 1; 
    } 
} 

内容的提问来源于stack exchange，提问作者Ranvijay