javascript - 尝试将此 html 发送到本地存储中，以便我可以在新的购物车页面中使用，但它一直给我一个错误

Question

这是 HTML 代码:

<div class="cofefe">
                    <img src="photos/Shop%20-%20French%2Roast.png">
                    <p>Somecoffee</p>
                    <p>15</p>
                    <p>French Roast</p>
                    <button id="cartitem1" onclick="addCart()" class="button">Add to cart</button>
                </div>

这是 JavaScript:

function addCart() {
        var name = this.parentElement.children[1].getContext;
        var prices = this.parentElement.children[2].getContext;

        var storeThis = {'name': name, 'price': prices};
        localStorage.setItem(name, JSON.stringify(storeThis)); 
    }

在 Chrome 中我得到:

cart.js:2 Uncaught TypeError: Cannot read property 'children' of undefined at addCart (cart.js:2) at HTMLButtonElement.onclick (shop.html:40)

和

Uncaught TypeError: Cannot read property 'children' of undefined

我确定 JavaScript 有问题。我不明白什么。

Answer 1

您的 JavaScript 代码没有任何内容可供 this 处理。您需要获取当前目标。将您的函数更改为以下内容:

function addCart(event) {
    var name = event.target.parentElement.children[1].getContext;
    var prices = event.target.parentElement.children[2].getContext;
    var storeThis = {'name': name, 'price': prices};
    localStorage.setItem(name, JSON.stringify(storeThis)); 
}

编辑:

这是一种使其正常工作的安全方法 - 使用 JavaScript 添加事件监听器而不是内联 HTML 事件监听器:

<button id="cartitem1" class="button">Add to cart</button>

JavaScript:

document.getElementById("cartitem1").addEventListener("click", function(e) {
    addCart(e);
})