从类别链接填充菜单-for循环

Question

我正在努力寻找循环问题所在。我一直收到此TypeError信息，并且尝试过四处移动，但不确定自己缺少什么。

我试图通过在单击时将事件侦听器添加到我的类别标题来填充列表。当我单击时，应显示一个4图片网格，其中列出了该类别的所有项目。但是，我收到此错误：

main.js：98未捕获的TypeError：无法读取未定义的属性“ length”     在HTMLButtonElement.populateItems（main.js：98）

var cart = [];

var dairyItems = [{
        img: 'images\Dairy\butter.png',
        name: 'Butter'
    },

    {
        img: 'images\Dairy\milk.png',
        name: 'Milk'
    },

    {
        img: 'images\Dairy\sour cream.png',
        name: 'Sour Cream'
    },

    {
        img: 'images\Dairy\yogurt.png',
        name: 'Yogurt'
    }
];

var meatItems = [{
        img: 'images\Meat\chicken-breast.png',
        name: 'Chicken Breasts'
    },

    {
        img: 'images\Meat\ground-beef.png',
        name: 'Ground Beef'
    },

    {
        img: 'images\Meat\pork-chops.png',
        name: 'Pork Chops'
    },

    {
        img: 'images\Meat\t-bone.png',
        name: 'T-Bone Steak'
    }
];

var produceItems = [{
        img: '\images\Produce\avocado.png',
        name: 'Avocados'
    },

    {
        img: '\images\Produce\broccoli.png',
        name: 'Broccoli'
    },

    {
        img: '\images\Produce\cauliflower.png',
        name: 'Cauliflower'
    },

    {
        img: 'images\Produce\lettuce.png',
        name: 'Lettuce'
    }
];

var dairy = document.getElementById('dairy').addEventListener('click', populateItems);

var meat = document.getElementById('meat').addEventListener('click', populateItems);

var produce = document.getElementById('produce').addEventListener('click', populateItems);

//-----------------ADD TO CART--------------//


//----------------ADD TO SCREEN-------------//


function populateItems(category) {
    
    clearpopulateItems();

    var myItems;
    switch(category) {
        case 'dairy':
            myItems = dairyItems;
            break;
        case 'meat':
            myItems = meatItems;
            break;
        case 'produce':
            myItems = produceItems;
            break;
        default:
    }


    var categoryList = document.querySelectorAll('ul');
    for(var i = 0; i < myItems.length; i++) {
        myItems[i].addEventListener('click', addCat);
        function addCat() {categoryList.append(
            `<li class='items'>
                <img src='${currentItem.img}'>
                <p>${currentItem.name}</p>
            </li>`);
        }
    }


    document.getElementById('items').append(categoryList);
 

function clearpopulateItems() {
    var items = document.getElementById('items')
    while(items.firstChild) items.removeChild(items.firstChild);
}

function addToCart(item) {
    document.querySelectorAll('ul').append(`
    <li>
            ${item}
    </li>`);
    }
}

Answer 1

编辑

我不会复制代码。您必须修复它。

• 在您的上一个代码中，您两次设置了Font Awesome 5 Free。
• 添加eventListener时，dairyItems需要一个参数。
• 您不能执行此populateItems，因为它不是HTML元素。这是一个对象数组
• 您尚未声明myItems[i].addEventListener。
• 等等。

Answer 2

将您的代码包装到此代码段中。存在错误，因为您在未创建的DOM元素上调用了代码。首先需要加载DOM，然后可以使用DOM API。

document.addEventListener( 'DOMContentLoaded', function() {
 // your whole code 
});

...或者您可以将代码添加到HTML的末尾，然后在渲染DOM之后加载JS代码。

Answer 3

我认为您没有ID为dairy的元素。这就是为什么它为空。确认首先创建了元素，然后重试。