JavaScript JavaScript and the DOM Getting a Handle on the DOM Select a Page Element By Its ID

Katiuska A
Katiuska A
10,007 Points

"Is not a function" error

I'm trying to recreate to this very simple example and I really don't see where I'm going wrong. I tried doing this example but I couldn't on my own. After typing and typing, checking every line, I opted to just copy from the exercise file the snippet and then it worked, so I'm a moron.

I tried then doing the className example with a website I'm working on. It should have worked the same but it doesn't and I don't know why. Can someone tell me what I'm doing wrong? Why is Guil's a function and not mine?

Thanks

// Guil's code

var myHeading = document.getElementById('myHeading');

myHeading.addEventListener('click', () => { myHeading.style.backgroundColor = 'pink'; });

// My code

var myList = document.getElementsByClassName('nav-li');

myList.addEventListener('click', () => { myList.style.backgroundColor = 'pink'; });

7 Answers

Unlike getElementById(), getElementsByClassName() returns a collection. So you will want to assign an individual item from the collection.

var myList = document.getElementsByClassName('nav-li')[0];

Note the [0] index at the end. This is provided you have an element with a class name = 'nav-li'

Katiuska A
Katiuska A
10,007 Points

Ohhh, you beautiful genius!! Thank you so much!!! I can't believe I'm going to have to rewatch the whole DOM course again. I took a few weeks off and I've forgotten EVERYTHING!!

Again, thanks for your help!

Katiuska A
Katiuska A
10,007 Points

You know, selecting an index works if I want to select only one item in the collection but I tried creating a loop so that when I click on any of the elements belonging to the 'nav-li' class would change color when clocked on but again I'm getting the not a function error. Here's my code. Can you help me again?

var myList = document.getElementsByClassName('nav-li'); myList.addEventListener('click', () => {

for(i = 0; i < myList.length; i += 1) {

    myList[i].style.backgroundColor = 'pink';

}

});

You are trying to use addEventListener with collection myList. Instead you would need to loop through the collection and use addEventListener with each element

var myList = document.getElementsByClassName('nav-li'); 

for(i = 0; i < myList.length; i += 1) {
    myList[i].addEventListener('click', function() {
        this.style.backgroundColor = 'pink';
    });
};
Katiuska A
Katiuska A
10,007 Points

I see what I did wrong: I started with the event listener when instead I should have started the loop and put the event listener function INSIDE the loop. Also, I never use 'this', as I'm not sure how to use it and it wasn't on this course. I first saw it in a later Object Oriented JavaScript course.

I'm using the code with 'this' instead of "myList.style.backgroundColor = ' pink';" because using myList is simply not working. It says cannot set property of undefined. Why is that so? Guil never used 'this' on this course, not to my recollection.

Thank you, Kris!

Here is an explanation of why you see undefined. There is also a recommendation to not use the loop at all and instead use event delegation. Then the code might look like this:

document.body.addEventListener('click',function(e){
    if (e.target.className == 'nav-li'){
        e.target.style.backgroundColor = 'pink';
    }
});
Katiuska A
Katiuska A
10,007 Points

The bubbling? Thank you, Kris. I will check out the link. You've been amazing!