Tengo este ciclo, la identificación es única. Cuando trato de incrementar, funciona solo para un campo de entrada. ¿Cómo puedo incrementar y disminuir usando una identificación única?
@forelse($allproduct as $key=>$data) <tr> <td data-label="@lang('Date')"> <div class="quantity col-md-8" style="display:flex; "> <input type="text" value="" class="form-control req amnt display-inline" id="qtyid[{{$data->product_id}}]" min="0"> <div class="quantity-nav"> <div class="quantity-button quantity-up qty" onclick="incrementValue()">+</div> <div class="quantity-button quantity-down qty" onclick="decrementValue()">-</div> </div> </div> </td> </tr> @endforelseJavaScript
function incrementValue() { var value = parseInt(document.getElementById("qtyid").value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('qtyid').value = value; } function decrementValue() { var value = parseInt(document.getElementById('qtyid').value, 10); value = isNaN(value) ? 0 : value; value--; if(value == -1) { value = 0; } document.getElementById('qtyid').value = value; }Le sugiero que use un enfoque que no necesite identificaciones.
function incrementValue(e) { // use the quantity field's DOM position relative to the button that was clicked const qty = e.target.parentNode.parentNode.querySelector("input.req.amnt"); var value = parseInt(qty.value, 10); value = isNaN(value) ? 0 : value; value++; qty.value = value; } function decrementValue(e) { const qty = e.target.parentNode.parentNode.querySelector("input.req.amnt"); var value = parseInt(qty.value, 10); value = isNaN(value) ? 0 : value; value--; if(value == -1) { value = 0; } qty.value = value; } @forelse($allproduct as $key=>$data) <tr> <td data-label="@lang('Date')"> <div class="quantity col-md-8" style="display:flex; "> <input type="text" value="" class="form-control req amnt display-inline" min="0"> <div class="quantity-nav"> <div class="quantity-button quantity-up qty" onclick="incrementValue(event)">+</div> <div class="quantity-button quantity-down qty" onclick="decrementValue(event)">-</div> </div> </div> </td> </tr> @endforelse