Cart increment and decrement values JS - javascript

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;
}
}

Related

How can I increment and decrement value with unique id?

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

Assign value of number input to value of radio Button

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

How to fill two inputs with same function and how to add max value?

I have this increase/decrease function, and I have 2 problems with :
1.I need to fill 2 inputs with same value, ex: if input has value = 1, inputs2 should has same value.
2.I need to add max value of 24 for var el or input. I tried with max="10" on input, but doesn't working anymore. Please, feel free to answer.
function increaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('number').value = 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;
}
<img class="left-down" src="images/clock/left-down.png" id="decrease" onclick="decreaseValue()" value="Decrease Value">
<img class="left-up" src="images/clock/left-up.png" id="increase" onclick="increaseValue()" value="Increase Value">
<input type='Number' id='number' value='0' class='qty' max="10" min="0" />
<input type='Number' id='number2' value='0' class='qty' max="10" min="0" />
Try this:
function increaseValue() {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
value++;
if(value>24){return}
document.getElementById('number').value = value;
document.getElementById('number2').value = 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;
document.getElementById('number2').value = value;
}
<img class="left-down" src="images/clock/left-down.png" id="decrease" onclick="decreaseValue()" value="Decrease Value">
<img class="left-up" src="images/clock/left-up.png" id="increase" onclick="increaseValue()" value="Increase Value">
<input type='Number' id='number' value='0' class='qty' max="10" min="0" />
<input type='Number' id='number2' value='0' class='qty' max="10" min="0" />
You can use the same function to update both values like this:-
JS
function updateValue(action) {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
if (action === 'increase') {
value++;
if (value > 24) return;
}
if (action === 'decrease') {
value < 1 ? value = 1 : '';
value--;
}
document.getElementById('number').value = value;
document.getElementById('number2').value = value;
}
HTML
<img class="left-down" src="images/clock/left-down.png" id="decrease" onclick="updateValue('decrease')" value="Decrease Value">
<img class="left-up" src="images/clock/left-up.png" id="increase" onclick="updateValue('increase')" value="Increase Value">
<input type='Number' id='number' value='0' class='qty' max="10" min="0" />
<input type='Number' id='number2' value='0' class='qty' max="10" min="0" />
<h1 style="color:green;">
GeeksForGeeks
</h1>
<input type='text' id='id1' />
<br>
<br>
<button onclick="gfg_Run()">
click to set
</button>
<p id="GFG_DOWN" style="color:green;
font-size: 20px;
font-weight: bold;">
</p>
**var el_down = document.getElementById("GFG_DOWN");
var inputF = document.getElementById("id1");
function gfg_Run() {
inputF.setAttribute('value', 'defaultValue');
el_down.innerHTML =
"Value = " + "'" + inputF.value + "'";
}**
Below code will also warn user, if they explicitily type value more than 24.
function updateValue(action) {
var value = parseInt(document.getElementById('number').value, 10);
value = isNaN(value) ? 0 : value;
if (action === 'increase') {
value++;
if (value > 24) return;
}
if (action === 'decrease') {
value < 1 ? value = 1 : '';
value--;
}
document.getElementById('number').value = value;
document.getElementById('number2').value = value;
}
function syncValue(inputBox){
let firstInput = document.getElementById('number');
let secondInput = document.getElementById('number2');
if(inputBox === 'primary'){
secondInput.value = firstInput.value;
}
if(inputBox === 'sencondry'){
firstInput.value = secondInput.value;
}
if(firstInput.value > 24 || secondInput.value > 24 ){
firstInput.style.border = "1px solid red";
secondInput.style.border = "1px solid red";
}else{
firstInput.style.border = "1px solid grey";
secondInput.style.border = "1px solid grey";
}
}
Added blur event to your html and changed max value to 24
<input type='Number' id='number' value='0' class='qty' min="0" max="24" onblur="syncValue('primary')" />
<input type='Number' id='number2' value='0' class='qty' min="0" max="24" onblur="syncValue('sencondry')" />

Javascript - Adjust price when changing quantity

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>

Javascript Basic Increment and Decrement

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>

Categories