错误的原因“未捕获的TypeError：无法读取未定义的属性'名称'”

Question

我一直在研究一个JavaScript代码，以制作比萨饼的结帐购物车，但是一直有showCart功能的问题。

let pizzas=[
{ name:"Pepperoni", img:"pizza.png", price:8.99}, 
{ name:"Alfredo", img:"pizza.png", price:9.99}, 
{ name:"Cheese", img:"cheese.png", price:7.99} 
];

function registerButtonEvents() 
{
    let buttons=document.getElementsByTagName("button");
    for(let i = 0; i < buttons.length-1; i++)
    {
        buttons[i].addEventListener("click", function() {
            addToCart(i);
        });
    }
    let number = localStorage.getItem("number");
    if(number == null)
        number = 0;
    document.getElementById("num").innerHTML = number;
}

function addToCart(pId)
{
    let cartJ = localStorage.getItem("cart");
    let cart;

    if(cartJ===null) //Cart is empty
    {
        cart=[];
    }
    else
    {
        cart=cartJ.split(",");
    }

    cart.push(pId);
    let number= localStorage.getItem("number");

    if(number===null)
        number = 0;

    document.getElementById("num").innerHTML = `${++number}`;
    localStorage.setItem("cart", cart.toString());
    localStorage.setItem("number", number);
}

function clearCart()
{
    localStorage.removeItem("cart");
    localStorage.removeItem("num");
}

function showCart() 
{
    let cartJ = localStorage.getItem("cart");
    let cart = [];
    let info = "";
    if(cartJ === null)
    {
        document.getElementById("myCart").innerHTML=`<h2>No items in cart!</h2>`;
    }
    else
    {
        cart = cartJ.split(","); 
        for (let i in cart)
        {
            let item = pizzas[cart[i]];
            info+=
                `<div class="row">
                    <div class="col-md-2 text-center">
                        <h3>${item.name}</h3>
                    </div>  
                    <div class="col-md-2 text-center">
                        <img class="pizza" src="./images/${item.img}" alt="pepperoni">
                    </div>
                    <div class="col-md-2 text-center">
                        <h3>${item.price}</h3>
                    </div>
                    <div class="col-md-2 text-center">
                        <button type="button" class="btn btn-primary" onclick="removePizza(${i})">Remove</button>
                    </div>
                </div>
                `;
        }
        document.getElementById("myCart").innerHTML=info;
    }
}


function removePizza(piz)
{
    var cart = localStorage.getItem("cart");
    cart = cart.split(",");
    cart.splice(piz, 1);
    if (cart.length == 0)
        clearCart();
    else
    {
        localStorage.setItem("cart", cart);
        localStorage.setItem("number",cart.length);
    }
    showCart();
}

开发人员工具告诉我错误在以下行中：

let item = pizzas[cart[i]];

但我不一定理解为什么。如果有人能发送一些反馈，我们将不胜感激。

Answer 1

问题是当您访问<h3>${item.name}</h3>时。您的商品在那里未定义，因为您的购物车（cart = cartJ.split(",");）可能会存储一些字符串，例如＆＃34; Pepperoni＆＃34; （当你用逗号分割它们）之后你想要使用其中一个字符串而不是索引来访问比萨饼数组。