PHP循环输出商品时数量增减按钮仅首个商品生效的解决方法

HTML标准规定同一页面中id属性值必须全局唯一。你在PHP循环输出商品时，给所有商品的数量输入框都设置了相同的id="number"，JS执行document.getElementById('number')时永远只会匹配到页面中第一个符合该id的元素，因此点击任意商品的加减按钮，都只会修改第一个商品的数量值。
另外原代码还有几个影响功能的小问题：

• 数量输入框的初始值$number未提前定义，会触发PHP警告，默认购买数量应该初始化为1
• 商品外层div的style属性多写了一个单引号，可能导致样式渲染异常
• 原有减数量逻辑没有做最小值限制，会出现0、负数等不符合购买逻辑的数值

1. 修改PHP循环输出的HTML代码 #

直接利用你已经从数据库取出的商品唯一主键$id作为每个数量输入框的区分标识，同时把对应输入框的id传给加减点击函数，修复代码如下：

$run_produtos = mysqli_query($con,$get_produtos);

while($row_produtos=mysqli_fetch_array($run_produtos)){
    
    $id = $row_produtos['id'];
    $categoria = $row_produtos['categoria'];
    $foto = $row_produtos['foto'];
    $nome = $row_produtos['nome'];
    $descricao = $row_produtos['descricao'];
    $preco = $row_produtos['preco'];
    $default_num = 1; // 初始购买数量设为1

    echo "
    <div style='text-align: left;'>
        <center>
            <img src='produtos/$foto' style='width: 200px; height: auto; border: 2px solid grey'>
            <h3>$nome</h3>
            <h4>$descricao</h4>
            <h3>Valor: R$ $preco</h3>

            <form>
                <input style='font-size: 20px;' type='button' onclick='decreaseValue(\"number_$id\")' value='-' />
                <input style='font-size: 20px; width: 70px; text-align: center;' type='text' id='number_$id' value='$default_num' min='1'/>
                <input style='font-size: 20px;' type='button' onclick='incrementValue(\"number_$id\")' value='+' />
            </form>

        </center>
        <hr>
    </div>
    <br>
    ";
}

修改后每个输入框的id会变成number_1、number_2这类和商品ID绑定的唯一值，点击按钮时会把对应输入框的id传给JS函数，不会再出现匹配冲突。

2. 修改JS交互逻辑 #

调整两个加减函数，接收传入的输入框ID作为操作目标，同时增加最小值判断，避免数量小于1：

<script>
function incrementValue(inputId)
{
    var targetInput = document.getElementById(inputId);
    var value = parseInt(targetInput.value, 10);
    value = isNaN(value) ? 1 : value;
    value++;
    targetInput.value = value;
}
function decreaseValue(inputId)
{
    var targetInput = document.getElementById(inputId);
    var value = parseInt(targetInput.value, 10);
    value = isNaN(value) ? 1 : value;
    // 数量最小为1，不允许减到0或负数
    if(value > 1){
        value--;
        targetInput.value = value;
    }
}
</script>

• 可以给数量输入框增加输入监听，用户手动输入非数字、小于1的数值时自动修正为1
• 后续提交下单时，建议把商品ID作为表单参数一起提交，方便后端准确获取每个商品对应的购买数量
• 如果不想生成唯一ID，也可以通过DOM遍历的方式，找到当前点击按钮同级的输入框操作，适合商品没有唯一ID的场景，但用商品ID绑定的方式逻辑更清晰，排查问题更方便

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