CODEWITHSUNDEEP
javascript
K. Downs
K. Downs

Reputation: 1

Populate Menu From Category links - for loop

I'm struggling to find what's wrong with my loop. I keep receiving this TypeError and I'm tried moving things around but I'm not sure what I'm missing.

I am trying to populate a list by adding an event listener on click to my category headings. When I click, a 4 picture grid should show up with all items of the category listed. However, I receive this error:

main.js:98 Uncaught TypeError: Cannot read property 'length' of undefined at 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>`);
    }
}

Upvotes: 0

Views: 43

Answers (3)

eag845
eag845

Reputation: 1013

EDITED

enter image description here

I'm not going to copy the code. You have to fix it.

  • In your last code you are setting dairyItems twice.
  • When you add the eventListener, populateItems needs an argument.
  • Yo cannot do this myItems[i].addEventListener because it's not an HTML element. It's an array of Objects
  • You haven't declared currentItem.
  • Etc.

Upvotes: 1

Nick
Nick

Reputation: 3845

I don't think you have an element with the id dairy. That's why its null. Confirm that you have created the element first then try again.

Upvotes: 0

Martin Homola
Martin Homola

Reputation: 245

Wrap your code to this snippet. There is error, because you call code on DOM elements which are not created. First of all DOM needs to be loaded, then you can use DOM API.

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

...or you can add your code to the end of HTML, then JS code will be loaded after DOM is rendered.

Upvotes: 0

Related Questions