如何在没有js框架的情况下将产品添加到购物车

Question

I am Beginner developer and I made e-commerce website (using html css and JavaScript(without framework)

I stuck in Add products on shopping cart because JavaScript and these my Code: HTML:

<div class="small-container">
    <div class="row">
    <div class="col-4">
    <img src="images/20 ps4.png" alt=""/></a>
    <h4>20 Playstation Store(PSN)</h4>
    <p>$20.00</p>
    <button type="button" class="btn1" ><h3 class="text-btn">add to cart</h3></button>
    </div>

    <!--2-->
    <div class="col-4">
    <img src="images/25 ps4.png" alt="" />
    <h4>25 Playstation Store(PSN)</h4>
    <p>$25.00</p>
    <button type="button" class="btn1" onclick="window.location.href='cart.html'"><h3 class="text-btn">add to cart</h3></button>
    </div>

JavaScript:

function ready() {
    var removeCartItemButtons = document.getElementsByClassName('btn1')
    for (var i = 0; i < removeCartItemButtons.length; i++) {
        var button = removeCartItemButtons[i]
        button.addEventListener('click', removeCartItem)
    }

    var quantityInputs = document.getElementsByClassName('btn1')
    for (var i = 0; i < quantityInputs.length; i++) {
        var input = quantityInputs[i]
        input.addEventListener('change', quantityChanged)
    }

    var addToCartButtons = document.getElementsByClassName('btn1')
    for (var i = 0; i < addToCartButtons.length; i++) {
        var button = addToCartButtons[i]
        button.addEventListener('click', addToCartClicked)
    }

    document.getElementsByClassName('btn1')[0].addEventListener('click', purchaseClicked)
}

Css:

.row {
margin-top: 50px;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}

.small-container{
max-width: 1080px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}

.col-4 {
flex-basis: 25%;
padding: 10px;
min-width: 200px;
margin-bottom: 50px;
transition: transform 0.5s;
}
  
.col-4 img {
width: 100%;
}

Thanks a lot.

I try to find function to add products item to the shopping cart

also i have to use JavaScript without framework

Answer 1

What's the purpose of var addToCartButtons = document.getElementsByClassName('btn1') , var quantityInputs = document.getElementsByClassName('btn1') and var removeCartItemButtons = document.getElementsByClassName('btn1') ? The query is the same and therefore will always return identical elements.

Your approach is good, just add correct classes to your elements and queries. Be sure to make the HTML structure uniform. Metadata about your card can be stored in localStorage for example. You can learn about working with localStorage here . By the way, you can use newer syntax like forof loops or const keyword to make your code more readable.

 (() => { const addToCardButtons = document.querySelectorAll('.btn--add_to_cart'); for (const btn of addToCardButtons) { const identifier = btn.dataset.target; btn.addEventListener('click', () => addToCart(identifier)) } const addToCart = (id) => { console.log(id); // handle 'add to cart' functionality } // other functionalities can follow the same structure })()

 <div class="small-container"> <div class="row"> <div class="col-4"> <img src="images/20 ps4.png" alt="" /></a> <h4>20 Playstation Store(PSN)</h4> <p>$20.00</p> <button type="button" data-target="1" class="btn btn--add_to_cart">add to cart</button> </div> <.--2--> <div class="col-4"> <img src="images/25 ps4.png" alt="" /> <h4>25 Playstation Store(PSN)</h4> <p>$25.00</p> <button type="button" data-target="2" class="btn btn--add_to_cart">add to cart</button> </div>