Question

这是一个表示购物车商品数量字段的div：

<div class="cart_quantity_div">
  <form action="cart.php" method="post">
    <button class="cart_qty_controls" onclick="minusOne(qty_field_<?php echo $item_id; ?>)">-</button>
    <input type="text" name="cart_item_qty" value="<?php echo $each_item['quantity']; ?>" size="1" maxlength="3" id="qty_field_<?php echo $item_id; ?>"/>
    <input type="submit" name="qty_adjust_cart<?php echo $item_id; ?>" value="change" class="cart_qty_adjust_btn"/>
    <input type="hidden" name="cart_item_to_adjust_qty" value="<?php echo $item_id; ?>"/>
  </form>
</div>

这是草稿版本所以不要注意提交和隐藏的输入

和JS代码：

function minusOne (input_id){

var subtracted_qty = document.getElementById(qty_field_id).value = document.getElementById(qty_field_id).value - 1;
document.getElementById(qty_field_id).value = subtracted_qty;
}

我想通过单击减号按钮-1来更改输入文本字段的值。但由于某种原因，它不起作用。

请您查看我的代码并找出它的错误。或者也许有更好的方法来做这样的数量变化..

Answer 1

您的代码不会设置变量qty_field_id，也不会使用变量input_id。如果input_id指的是与PHP的$item_id相同的值，请尝试将以下行添加到JavaScript函数的顶部：

var qty_field_id = "qty_field_" + input_id;

Answer 2

您不应该使用内联JavaScript，而且您没有引用正确的元素。试试这个：

HTML：

<div class="cart_quantity_div">
  <form action="cart.php" method="post">
    <button class="cart_qty_controls" data-productId="<?php echo $item_id; ?>">-</button>
    <input type="text" name="cart_item_qty" value="<?php echo $each_item['quantity']; ?>" size="1" maxlength="3" id="qty_field_<?php echo $item_id; ?>"/>
    <input type="submit" name="qty_adjust_cart<?php echo $item_id; ?>" value="change" class="cart_qty_adjust_btn"/>
    <input type="hidden" name="cart_item_to_adjust_qty" value="<?php echo $item_id; ?>"/>
  </form>
</div>

JS：

[].slice.call(document.getElementsByClassName('cart_qty_controls')).forEach(function(el){
    el.addEventListener('click', function(e) {
        var id = e.target.getAttribute('data-productId');
        document.getElementById('qty_field_' + id).value -= 1; 
  })
})

Javascript - 点击不工作时更改输入值

2 个答案: