I have this loop, The id is unique. When I try to increment it is working for only one input field. How can I increment and decrement using unique id?
#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>
#endforelse
Javascript
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;
}
I suggest you use an approach that doesn't need IDs.
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
Related
I have a radio button that when selected reveals a touchspin, anytime the touchspin increase or decrease button is being clicked i want the value of the radio button to be set to the value of the touch spin’s number input. I tried putting ('input.custom-vote:radio').val(value) at the bottom of the increaseValue and decreaseValue function but it still doesn't work. I will greatly appreciate any help to solve this problem.
<!--Touch-spin increase Value-->
function increaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
<!--Touch-spin decrease Value-->
function decreaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('number').value = value;
}
<div class="custom-control custom-radio mb-3">
<input name="votes" value="0" class="form-check-input custom-control-input custom-vote" id="custom" type="radio">
<label class="custom-control-label form-check-label" for="custom">Custom Vote</label>
</div>
<div class="input-group custom-vote">
<button id="decrease" onclick="decreaseValue()" value="Decrease Value" type="button"></button>
<input type="number" maxlength="6" size="5" class="touchspin form-control custom-count" id="number" value="150">
<button id="increase" onclick="increaseValue()" value="Increase Value" type="button"></button>
</div>
This might work:
document.getElementById("custom").value = document.getElementById('number').value
I'm learning JavaScript. I want to make subtotal for each product and I don't know why I keep getting NaN? Here is my code. I couldn't find the problem for this. Maybe there's something wrong with the value or something?
var value;
var price = document.getElementById("price");
function priceTotal() {
var total = value * price;
document.getElementById("subtotal").innerText = total;
}
$('.increment-btn').click(function(e) {
e.preventDefault();
var incre_value = $(this).parents('.quantity').find('#qty-input').val();
var value = parseInt(incre_value, 10);
value = isNaN(value) ? 0 : value;
if (value < 100) {
value++;
$(this).parents('.quantity').find('#qty-input').val(value);
}
priceTotal();
});
$('.decrement-btn').click(function(e) {
e.preventDefault();
var decre_value = $(this).parents('.quantity').find('#qty-input').val();
var value = parseInt(decre_value, 10);
value = isNaN(value) ? 0 : value;
if (value > 1) {
value--;
$(this).parents('.quantity').find('#qty-input').val(value);
}
priceTotal();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="text-center" id="price">Rp. {{ number_format($cartlist->product->productprice)}}</td>
<td class="cart-product-quantity text-center" width="132px">
<div class="input-group quantity">
<div class="input-group-prepend decrement-btn changeQuantity" style="cursor: pointer">
<span class="input-group-text">-</span>
</div>
<input type="text" class="qty-input form-control text-center" maxlength="2" value="1" id="qty-input">
<div class="input-group-append increment-btn changeQuantity" style="cursor: pointer">
<span class="input-group-text">+</span>
</div>
</div>
</td>
<!-- <input style="text-align:center; width: 70px;" type="text" name="subtotal" id="subtotal" value="{{$cartlist->product->productprice}}" > -->
<td class="text-center">
<span id="subtotal">Rp. {{ number_format($cartlist->product->productprice)}}</span>
</td>
Two problems:
1 -- You need to pass value from the onClick() handler to the priceTotal() function. I recommend you take a quick glance at MDN Web Docs: Encapsulation, specifically:
Encapsulation is the packing of data and functions into one component (for example, a class) and then controlling access to that component to make a "blackbox" out of the object.
2 -- You are setting price to var price = document.getElementById("price"); and then using it in multiplication. You cannot do that, you must use a number in multiplication, not an HTML element. In addition, the price element is not even an input, so you can't use its val() function either. I set this statically to just 1 to prove my point.
var value;
var price = 1; // you can't use an element as an integer
function priceTotal(value) {
var total = value * price;
document.getElementById("subtotal").innerText = total;
}
$('.increment-btn').click(function(e) {
e.preventDefault();
var incre_value = $(this).parents('.quantity').find('#qty-input').val();
var value = parseInt(incre_value, 10);
value = isNaN(value) ? 0 : value;
if (value < 100) {
value++;
$(this).parents('.quantity').find('#qty-input').val(value);
}
priceTotal(value);
});
$('.decrement-btn').click(function(e) {
e.preventDefault();
var decre_value = $(this).parents('.quantity').find('#qty-input').val();
var value = parseInt(decre_value, 10);
value = isNaN(value) ? 0 : value;
if (value > 1) {
value--;
$(this).parents('.quantity').find('#qty-input').val(value);
}
priceTotal(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="text-center" id="price">Rp. {{ number_format($cartlist->product->productprice)}}</td>
<td class="cart-product-quantity text-center" width="132px">
<div class="input-group quantity">
<div class="input-group-prepend decrement-btn changeQuantity" style="cursor: pointer">
<span class="input-group-text">-</span>
</div>
<input type="text" class="qty-input form-control text-center" maxlength="2" value="1" id="qty-input">
<div class="input-group-append increment-btn changeQuantity" style="cursor: pointer">
<span class="input-group-text">+</span>
</div>
</div>
</td>
<!-- <input style="text-align:center; width: 70px;" type="text" name="subtotal" id="subtotal" value="{{$cartlist->product->productprice}}" > -->
<td class="text-center">
<span id="subtotal">Rp. {{ number_format($cartlist->product->productprice)}}</span>
</td>
I'm trying to increment and decrement values in a cart. I first implemented it by targeting an id, and my js code worked. But then I realized that I'll have mulitple items in the cart so I won't be able to target the IDs, so then I changed from getElementById to getElementsByClassName, but the js code no longer works. How can I solve this?
<div class="quantity">
<form>
<div class="value-button" class="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
<input type="number" class="number" value="1" />
<div class="value-button" class="increase" onclick="increaseValue()" value="Increase Value">+</div>
</form>
</div>
JS
// Increase Value //
function increaseValue() {
var value = parseInt(document.getElementsByClassName('number').value, 10);
value = isNaN(value) ? 1 : value;
value++;
document.getElementsByClassName('number').value = value;
}
// Decrease Value //
function decreaseValue() {
var value = parseInt(document.getElementsByClassName('number').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementsByClassName('number').value = value;
}
My Previous code that was working
<div class="quantity">
<form>
<div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
<input type="number" id="number" value="1" />
<div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
</form>
</div>
JS
// Increase Value //
function increaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = value;
}
// Decrease Value //
function decreaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('number').value = value;
}
getElementsByClassName returns an HTMLCollection; you need to iterate over that and set the value on each contained element individually rather than trying to set the value of the HTMLCollection itself.
Or just use querySelector, like this:
// Increase Value //
function increaseValue() {
var value = parseInt(document.querySelector('.number').value, 10);
value = isNaN(value) ? 1 : value;
value++;
document.querySelector('.number').value = value;
}
// Decrease Value //
function decreaseValue() {
var value = parseInt(document.querySelector('.number').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.querySelector('.number').value = value;
}
getElementsByClassName return collection.
Instead document.getElementsByClassName('number').value you need use document.getElementsByClassName('number')[0].value
Instead of onclick in html use addEventListener.
For example you have some quantity.
<div class="quantity">
<form>
<div class="value-button" class="decrease" value="Decrease Value">-</div>
<input type="number" class="number" value="1" />
<div class="value-button" class="increase" value="Increase Value">+</div>
</form>
</div>
<div class="quantity">
<form>
<div class="value-button" class="decrease" value="Decrease Value">-</div>
<input type="number" class="number" value="1" />
<div class="value-button" class="increase" value="Increase Value">+</div>
</form>
</div>
<div class="quantity">
<form>
<div class="value-button" class="decrease" value="Decrease Value">-</div>
<input type="number" class="number" value="1" />
<div class="value-button" class="increase" value="Increase Value">+</div>
</form>
</div>
let quantities = document.getElementsByClassName('quantity');
for (let i=0; i<quantities.length; i++) {
let q = quantities[i];
let increaseElement = q.getElementsByClassName('increase')[0];
increaseElement.addEventListener('click', increaseValue, false);
function increaseValue() {
var value = parseInt(q.getElementsByClassName('number')[0].value, 10);
value++;
q.getElementsByClassName('number')[0].value = value;
}
}
I have a form to add product to basket where the user need to select quantity. I'm trying to adjust the price when quantity is modified. Here's my code:
<script>
function increaseValue() {
var value = parseInt(document.getElementById('quantity').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('quantity').value = value;
}
function decreaseValue() {
var value = parseInt(document.getElementById('quantity').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('quantity').value = value;
}
</script>
<div class="quantity-container">
<span>1</span>
<div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
<input type="number" id="quantity" name="quantity" value="1" />
<div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
</div>
I need to adjust the price for the following scenarios:
If quantity is increased using the 'increase' button
If quantity is decreased (but prevent zero quantity with $0.00 price)
If quantity is updated using the quantity text field
The problem is that the price is displayed using html between the numbers so i'm confused how to update the price. I assume I will have to use RegEx? I can't just hardcode the base price ($15.49 in this example) because the price is never the same (the prices come from SQL DB)
<div id="product-price">
$15<sup>.49</sup>
</div>
Use ES6's Template literals (``). Try the following:
For more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
function increaseValue() {
var value = parseInt(document.getElementById('quantity').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('quantity').value = value;
price = '$'+`<span>${p * value}</span>`;
document.getElementById('product-price').innerHTML=price;
}
function decreaseValue() {
var value = parseInt(document.getElementById('quantity').value, 10);
value = isNaN(value) ? 0 : value;
value < 1 ? value = 1 : '';
value--;
document.getElementById('quantity').value = value;
price = '$'+`<span>${p * value}</span>`;
document.getElementById('product-price').innerHTML=price;
}
var p='15.49';
var price = '$'+`<span>${p}</span>`;
document.getElementById('product-price').innerHTML=price;
<div id="myDiv">
<div class="quantity-container">
<span>1</span>
<div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
<input type="number" id="quantity" name="quantity" value="1" />
<div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
</div>
<div id="product-price">
</div>
Why isn't dec() decreasing the value?
<div id="variableTest">8</div>
<label id="incButton" onclick="inc()">+</div> </br>
<label id="decButton" onclick="dec()">-</div> </br>
function dec() {
var testDec = document.getElementById("variableTest").innerHTML;
testDec--;
}
function inc() {
var testInc = document.getElementById("variableTest").innerHTML;
testInc++;
}
http://jsfiddle.net/fv6VA/8/
element.innerHTML returns a string, not a number. You should use something like this:
var element = document.getElementById("variableTest");
element_number = parseFloat(element.innerHTML);
element_number++;
element.innerHTML = element_number;
Essentially you have made a copy of innerHTML, and are just decrementing it in javascript memory. You haven't actually set the innerHTML of the variableTest node.
function dec() {
var testDec = document.getElementById("variableTest").innerHTML;
testDec--;
document.getElementById("variableTest").innerHTML = testDec;
}
UPDATE
Also, your HTML is messed up. You need to close your label properly
<div id="variableTest">8</div>
<label id="incButton" onclick="inc()">+</label> </br>
<label id="decButton" onclick="dec()">-</label> </br>
<div class="container">
<input type="button" onclick="decrementValue()" value="-" />
<input type="text" name="quantity" value="1" maxlength="2" max="10" size="1" id="number" />
<input type="button" onclick="incrementValue()" value="+" />
</div>
<script type="text/javascript">
function incrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
if(value<10){
value++;
document.getElementById('number').value = value;
}
}
function decrementValue()
{
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
if(value>1){
value--;
document.getElementById('number').value = value;
}
}
</script>