Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Michael Paccione
Michael Paccione
9,017 Points

menuArray[i].addEventListener is not a function

I get this error menuArray[i].addEventListener is not a function

It's very frustrating, can tell me why this doesn't work?

    var wrapper = document.getElementById('wrapper');
    var switchmenu = document.getElementById('menu');
    var name = document.getElementById('name');
    var design = document.getElementById('design');
    var develop = document.getElementById('develop');
    var photography = document.getElementById('photography');
    var imaging = document.getElementById('imaging');
    var motion = document.getElementById('motion');

    var menuArray = [
        [switchmenu],
        [name],
        [design],
        [develop],
        [photography],
        [imaging],
        [motion]
    ];

    function menuClick(){   
        for (var i = 0; i < menuArray.length; i++){
            menuArray[i].addEventListener("click", function click(){

                if (this == switchmenu){
                    for (var n = 1; n < menuArray.length; n++){
                        menuArray[n].innerHTML = '';
                    };

                    menuArray[1].innerHTML = 'Portfolio';
                    menuArray[2].innerHTML = 'About';
                    menuArray[3].innerHTML = 'Contact';
                    menuArray[4].innerHTML = 'Blog';
                };//if

            }, false);//click()
        };//for loop
    };//menuClick()

    menuClick();

1 Answer

Brandon Barrette
Brandon Barrette
20,485 Points

One issue I see is this line is looping through the menuArray. For example, the first element will look like this:

[switchmenu].addEventListener("click", function click(){ });

When I think you want this:

switchmenu.addEventListener("click", function (){ });

(Notice I also removed the click after the function) Since switchmenu refers to an element with ID menu, I think you should change menuArray to this:

var menuArray = [
        switchmenu,
        name,
        design,
        develop,
        photography,
        imaging,
        motion
    ];
Michael Paccione
Michael Paccione
9,017 Points

Hi Brandon,

Thanks for the response. I originally had the menuArray vars without brackets but I had changed them in hopes of fixing the problem. Now having switched them back, thanks to your advice, I arrive at my previous problem which I don't understand why.

menuArray[i] is null

Brandon Barrette
Brandon Barrette
20,485 Points

So that means one of your vars you are saving with document.getElementById is null (meaning it can't find the element). I'd do some console.logs to check each variable before assembling the array.

Michael Paccione
Michael Paccione
9,017 Points

Thanks Brandon! I'm still new to this stuff so this has helped me out a lot.

I found the typo!

var switchmenu = document.getElementById('menu'); var switchmenu = document.getElementById('switchmenu');

Brandon Barrette
Brandon Barrette
20,485 Points

No problem! Use console.log a lot to make sure what you want is passing through your code.

I've spent hours going over code and it was all a minor typo in my ID, either in the HTML or the JavaScript.

Happy coding!