在单击 HTML 按钮时执行 Javascript 代码

Question

我目前正在制作网上商店。我用cookies来存储购物车。

这是我的 HTML 按钮：

<script type="text/javascript" src="{% static 'js/store/cart.js'  %}"></script>

<button data-product={{product.id}} data-action = "add" class="btn btn1 btn-primary update-cart">Add to cart</button>

当用户单击此按钮时，我想执行以下 Cart.js 代码，它只是创建一个 cookie 并将产品 ID 添加到 cookie 购物车。

//here i set the cart cookie
function getCookie(name) {
    //split string and get all induvidual name=value pairs in array
    var cookieArr = document.cookie.split(';');
    //loop though array elements
    for (var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");

        //removing whitespace at the beginning of the cookie name and compare it with the given string
        if (name == cookiePair[0].trim()) {
            //decode cookie value and return
            return decodeURIComponent(cookiePair[1]);
        }
    }
    //return null if not found
    return null;
}

var cart = JSON.parse(getCookie('cart'));
if (cart == undefined) {
    cart = {}
    console.log("cart was created")
    document.cookie = "cart=" + JSON.stringify(cart) + ";domain=;path=/"
}
console.log("cart:", cart);


//and here i take action when the html button gets a click
var updateBtns = document.getElementsByClassName('update-cart')

for (var i = 0; i < updateBtns.length; i++) {

    updateBtns[i].addEventListener('click', function () {
            var productId = this.dataset.product
            var action = this.dataset.action
            console.log('product id:', productId, 'action:', action)
            addCookieItem(productId, action)
        
    })

}

function addCookieItem(productId, action) {
    console.log('Not logged in...')

    if (action == "add") {
        if (cart[productId] == undefined) {
            cart[productId] = { 'quantity': 1 }

        }
        else {
            cart[productId]['quantity'] += 1
        }
    }

    if (action == "remove") {
        cart[productId]['quantity'] -= 1

        if (cart[productId]['quantity'] <= 0) {
            console.log("remove item")
            delete cart[productId]
        }

    }
    console.log("Cart=", cart)
    location.reload()
    document.cookie = "cart=" + JSON.stringify(cart) + ";domain=;path=/"

我的问题是当我点击按钮时它没有任何动作。怎么了？

Answer 1

点击处理程序是missing.it应该是这样的

<button onclick="addCookieItem(product.id,'add')" data-product={{product.id}} data-action = "add" class="btn btn1 btn-primary update-cart">Add to cart</button>

在单击 HTML 按钮时执行 Javascript 代码

Execute Javascript code on HTML button click

html

javascript

button

dom-events