Javascript - 单击时更改输入值不起作用答案

【问题标题】：Javascript - change input value on click not workingJavascript - 单击时更改输入值不起作用
【发布时间】：2016-02-21 03:26:09
【问题描述】：

这是一个代表购物车商品数量字段的 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 来更改输入文本字段的值。但由于某种原因，它不起作用。

请您检查我的代码并找出其中的问题。或者也许有一些更好的方法来做这样的数量变化..

【问题讨论】：

让我们稍微简化一下我的问题：我有和如何传递这个“somevalue”到JS函数？ “somevalue”是动态值

标签： javascript

【解决方案1】：

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

var qty_field_id = "qty_field_" + input_id;

【讨论】：

【解决方案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; 
  })
})

【讨论】：

您能解释一下[].slice.call 代码吗？我觉得有点奇怪
@CharlieHarding 它从getElementsByClassName() 返回的html collection 创建一个可迭代数组，以便您可以在其上运行 Array.prototype 函数（例如 forEach() 或 map() 等）。和[].forEach.call()差不多，但是速度更快
为什么不能只运行以下命令？ document.getElementsByClassName('cart_qty_controls').forEach(function(el){• • •}) 上
因为 forEach 是一个 Array.prototype，而不是 htmlCollection 原型。并且 document.getElementsByClassName() 不返回一个数组而是一个 htmlCollection