I have a very simple question. I just began learning javascript so I can't figure out the problem. Here is my code.
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">TEST Product</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$100</h1>
<button type="button" class="btn btn-block btn-outline-primary"
onclick="cartLS.add({id: 1, name: 'Product 1', quantity: 100})">Add to
Cart</button>
</div>
</div>
As you can see there is an onclick function. In this example, when the button is clicked, the product addition to the cart must be like that.
( id:1 name: Product 1 quantity:100 ).
I want to determine the quantity value with an input. Instead of the button I would like to put an input and adding the products quantity as that input value. How can I do that ?
Thanks a lot.
I've abstracted the onClick function for ease. The reason I use an Object called product is for future changes; it will be easier to find problems and manage the code.
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">TEST Product</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$100</h1>
<label for="quantity">Qty: </label>
<input name="quantity" id="quantity" type="number" placeholder="1" />
<button
type="button"
class="btn btn-block btn-outline-primary"
onClick="handleClick()"
>
Add to Cart
</button>
</div>
</div>
<script>
const handleClick = () => {
const product = {
id: 1,
name: "Product 1",
quantity: document.getElementById("quantity").value,
};
cartLS.add(product);
};
</script>