I am trying to add javascript to a shopping cart template I got from the internet. My goal is to be able to access each elements name, price and image src stored in their independent variable and so that if I press the "Add to cart" button, I can be able to console.log() either the name, price or image src of the specific item I want to add to cart. Please note that I am fairly new to Javascript. Any help would be appreciated
<section class="py-5">
<div class="container px-4 px-lg-5 mt-5">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
{% for item in items %}
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="https://cdn.pocket-lint.com/r/s/x1920/assets/images/161396-laptops-review-hands-on-macbook-air-review-image1-v2jzcb3rqd.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center text-dark">
<!-- Product name-->
<h5 class="fw-bolder ">{{ item.name }}</h5>
<!-- Product price-->
${{item.price}}
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline btn-success" href="#">Add to cart</a>
<a href="{{url_for('more_info')}}"><button class="btn btn-outline-dark mt-auto">More Info</button></a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Sale badge-->
<div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">AirPods Pro</h5>
<!-- Product reviews-->
<div class="d-flex justify-content-center small text-warning mb-2">
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
</div>
<!-- Product price-->
<span class="text-muted text-decoration-line-through">$20.00</span>
<span class="price">$18.00</span>
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline btn-success" href="#">Add to cart</a>
<a href="{{url_for('more_info')}}"><button class="btn btn-outline-dark mt-auto">More Info</button></a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Sale badge-->
<div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Ps5</h5>
<!-- Product price-->
<span class="text-muted text-decoration-line-through">$50.00</span>
<span class="price">$25.00</span>
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline btn-success" href="#">Add to cart</a>
<a href="{{url_for('more_info')}}"><button class="btn btn-outline-dark mt-auto">More Info</button></a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Popular Item</h5>
<!-- Product reviews-->
<div class="d-flex justify-content-center small text-warning mb-2">
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
</div>
<!-- Product price-->
<span class="price">$40.00</span>
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline btn-success" href="#">Add to cart</a>
<a href="{{url_for('more_info')}}"><button class="btn btn-outline-dark mt-auto">More Info</button></a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Sale badge-->
<div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Sale Item</h5>
<!-- Product price-->
<span class="text-muted text-decoration-line-through">$50.00</span>
<span class="price">$25.00</span>
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline btn-success" href="#">Add to cart</a>
<a href="{{url_for('more_info')}}"><button class="btn btn-outline-dark mt-auto">More Info</button></a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Fancy Product</h5>
<!-- Product price-->
<span class="price">$120.00 - $280.00</span>
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline btn-success" href="#">Add to cart</a>
<a href="{{url_for('more_info')}}"><button class="btn btn-outline-dark mt-auto">More Info</button></a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Sale badge-->
<div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Special Item</h5>
<!-- Product reviews-->
<div class="d-flex justify-content-center small text-warning mb-2">
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
</div>
<!-- Product price-->
<span class="text-muted text-decoration-line-through">$20.00</span>
<span class="price">$18.00</span>
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline btn-success" href="#">Add to cart</a>
<a href="{{url_for('more_info')}}"><button class="btn btn-outline-dark mt-auto">More Info</button></a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Popular Item</h5>
<!-- Product reviews-->
<div class="d-flex justify-content-center small text-warning mb-2">
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
</div>
<!-- Product price-->
<span class="price">$40.00</span>
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline btn-success" href="#">Add to cart</a>
<a href="{{url_for('more_info')}}"><button class="btn btn-outline-dark mt-auto">More Info</button></a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
I am using jina templating and flask for this project.
I have tried
let add_to_cart_btns = document.getElementsByClassName('btn-success')
for(let i=0; i<add_to_cart_btns.length; i++){
add_to_cart_btns[i].addEventListener('click', addToCart)
}
function addToCart(event){
let btn = event.target
let item_name= document.getElementsByClassName('fw-bolder')
let item_price = document.getElementsByClassName('price')
let item_image = document.getElementsByClassName('card-img-top')
Array.from(item_name).forEach(function(element) {
let item_name = element.innerHTML
});
Array.from(item_price).forEach(function(element) {
let item_price = element.innerHTML
});
}
but I notice each time I click "add to cart" it stores all the item names under "item_name" instead of just the specific item's button I clicked
You want to select product details based on its relevant button. This would probably involve going up from the button to a common parent then target the proper information. We shall use javascript and css selectors.
let add_to_cart_btns = document.querySelectorAll('.btn-success')
for (let i = 0; i < add_to_cart_btns.length; i++) {
add_to_cart_btns[i].addEventListener('click', addToCart)
}
function addToCart(event) {
let btn = event.target
var card = btn.closest(".card");
let item_name = card.querySelector('.fw-bolder').innerText
let item_image = card.querySelector('.card-img-top').getAttribute("src");
var copy = card.querySelector('.card-body>.text-center').cloneNode(true);
copy.querySelector(".fw-bolder").remove();
let item_price = copy.innerText.trim();
console.log(item_name, item_image, item_price)
event.preventDefault();
}.card-img-top {
width: 100px;
}<section class="py-5">
<div class="container px-4 px-lg-5 mt-5">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
{% for item in items %}
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="https://cdn.pocket-lint.com/r/s/x1920/assets/images/161396-laptops-review-hands-on-macbook-air-review-image1-v2jzcb3rqd.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center text-dark">
<!-- Product name-->
<h5 class="fw-bolder ">{{ item.name }}</h5>
<!-- Product price-->
${{item.price}}
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline btn-success" href="#">Add to cart</a>
<a href="{{url_for('more_info')}}"><button class="btn btn-outline-dark mt-auto">More Info</button></a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Sale badge-->
<div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">AirPods Pro</h5>
<!-- Product reviews-->
<div class="d-flex justify-content-center small text-warning mb-2">
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
</div>
<!-- Product price-->
<span class="text-muted text-decoration-line-through">$20.00</span>
<span class="price">$18.00</span>
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline btn-success" href="#">Add to cart</a>
<a href="{{url_for('more_info')}}"><button class="btn btn-outline-dark mt-auto">More Info</button></a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Sale badge-->
<div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Ps5</h5>
<!-- Product price-->
<span class="text-muted text-decoration-line-through">$50.00</span>
<span class="price">$25.00</span>
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline btn-success" href="#">Add to cart</a>
<a href="{{url_for('more_info')}}"><button class="btn btn-outline-dark mt-auto">More Info</button></a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Popular Item</h5>
<!-- Product reviews-->
<div class="d-flex justify-content-center small text-warning mb-2">
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
</div>
<!-- Product price-->
<span class="price">$40.00</span>
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline btn-success" href="#">Add to cart</a>
<a href="{{url_for('more_info')}}"><button class="btn btn-outline-dark mt-auto">More Info</button></a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Sale badge-->
<div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Sale Item</h5>
<!-- Product price-->
<span class="text-muted text-decoration-line-through">$50.00</span>
<span class="price">$25.00</span>
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline btn-success" href="#">Add to cart</a>
<a href="{{url_for('more_info')}}"><button class="btn btn-outline-dark mt-auto">More Info</button></a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Fancy Product</h5>
<!-- Product price-->
<span class="price">$120.00 - $280.00</span>
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline btn-success" href="#">Add to cart</a>
<a href="{{url_for('more_info')}}"><button class="btn btn-outline-dark mt-auto">More Info</button></a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Sale badge-->
<div class="badge bg-dark text-white position-absolute" style="top: 0.5rem; right: 0.5rem">Sale</div>
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Special Item</h5>
<!-- Product reviews-->
<div class="d-flex justify-content-center small text-warning mb-2">
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
</div>
<!-- Product price-->
<span class="text-muted text-decoration-line-through">$20.00</span>
<span class="price">$18.00</span>
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline btn-success" href="#">Add to cart</a>
<a href="{{url_for('more_info')}}"><button class="btn btn-outline-dark mt-auto">More Info</button></a>
</div>
</div>
</div>
</div>
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="https://dummyimage.com/450x300/dee2e6/6c757d.jpg" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">Popular Item</h5>
<!-- Product reviews-->
<div class="d-flex justify-content-center small text-warning mb-2">
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
<div class="bi-star-fill"></div>
</div>
<!-- Product price-->
<span class="price">$40.00</span>
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline btn-success" href="#">Add to cart</a>
<a href="{{url_for('more_info')}}"><button class="btn btn-outline-dark mt-auto">More Info</button></a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</section>