shopping cart item quantity increment decrement with javascript

Gavin Dennett answered on April 5, 2024 Popularity 1/10 Helpfulness 1/10

answer shopping cart item quantity increment decrement with javascript

shopping cart item quantity increment decrement with javascript

Comment

Example of shopping cart item quantity:

// HTML
<div>
  <p>Quantity: <span id="quantity">1</span></p>
  <button id="increment">+</button>
  <button id="decrement">-</button>
</div>

// JavaScript
const quantitySpan = document.getElementById('quantity');
const incrementButton = document.getElementById('increment');
const decrementButton = document.getElementById('decrement');

let quantity = 1;

incrementButton.addEventListener('click', () => {
  quantity++;
  quantitySpan.textContent = quantity;
});

decrementButton.addEventListener('click', () => {
  if (quantity > 1) {
    quantity--;
  }
  quantitySpan.textContent = quantity;
});

In this example, we get references to the HTML elements using document.getElementById. We then initialize the quantity variable to 1.

We add event listeners to the increment and decrement buttons. When the increment button is clicked, we increment the quantity variable and update the text content of the quantity span element. When the decrement button is clicked, we check if the quantity is greater than 1, and if so, decrement the quantity variable and update the text content of the quantity span element.

This code assumes that the quantity should not be less than 1. You can modify the code to suit your specific requirements.

You can also use input field instead of span and use value property for updating the quantity.

<input id="quantity" value="1" />

And in js

const quantityInput = document.getElementById('quantity');

incrementButton.addEventListener('click', () => {
  quantityInput.value = parseInt(quantityInput.value) + 1;
});

decrementButton.addEventListener('click', () => {
  if (parseInt(quantityInput.value) > 1) {
    quantityInput.value = parseInt(quantityInput.value) - 1;
  }
});

note: This is just an example, add funcionallity like updating cart total or validating the quanity etc.

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: decrement increment javascript shopping-cart

Link to this answer
Share Copy Link

Contributed on Apr 05 2024

Gavin Dennett

0 Answers Avg Quality 2/10

shopping cart item quantity increment decrement with javascript

Contents

More Related Answers

shopping cart item quantity increment decrement with javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.