如何在沒有js框架的情況下將產品添加到購物車

Question

我是初級開發人員，我制作了電子商務網站（使用 html css 和 JavaScript（無框架）

我堅持在購物車上添加產品因為 JavaScript 和這些我的代碼：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%;
}

非常感謝。

我試圖找到 function 將產品項目添加到購物車

我還必須在沒有框架的情況下使用 JavaScript

Answer 1

var addToCartButtons = document.getElementsByClassName('btn1') 、 var quantityInputs = document.getElementsByClassName('btn1')和var removeCartItemButtons = document.getElementsByClassName('btn1')什么？ 查詢是相同的，因此將始終返回相同的元素。

您的方法很好，只需將正確的類添加到您的元素和查詢中即可。 一定要讓HTML結構統一。 例如，關於您的卡的元數據可以存儲在 localStorage 中。 您可以在此處了解如何使用 localStorage。 順便說一句，您可以使用更新的語法，如forof循環或const關鍵字，使您的代碼更具可讀性。

 (() => { 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>