Adding functionality to a button in HTML

Question

I am creating a web-page for an online supermarket using Python and Django framework and for each of those products is an "Add to Cart" option.I want to make the code such that when the button is clicked it increases the quantity of that product by 1.

This is the code for the the whole product Card :-

<h5 class="card-title">{{ product.name }}</h5>
<p class="card-text">{{ product.price }}</p>
<a href="#" class="btn btn-primary">Add to Cart</a>

Can you use JQuery? You can easily do this. The answer is already here with really little codes, thus making it very easy to understand. https://stackoverflow.com/questions/4701349/jquery-increase-the-value-of-a-counter-when-a-button-is-clicked — Gosi, Jul 12 '19 at 02:21

score 0 · Answer 1 · answered Jul 12 '19 at 02:33

0

try javaScript function to this button :

<a href="#" class="btn btn-primary">Add to Cart</a>

- and make some element for the quantity of the product (text field maybe?). then just play with the value (using Jvascript).

answered Jul 12 '19 at 02:33

Yunas An

21
1

score 0 · Answer 2 · answered Sep 05 '19 at 21:15

You don't need to use jQuery for this.

let btn = document.getElementsByClassName('btn-primary');
let qty = 1; //get your curent quantity here
btn[0].addEventListener('click', incrementCart(qty));

incrementCart = (qty) => {
  return parseInt(qty) ++; 
}

Adding functionality to a button in HTML

2 Answers2