JavaScript classList不起作用。 我尝试了在这里看到的各种方法

Question

I'm new to JS and for some reason I cannot for the life of me get a simple button to add a class to my links. I've tried a few different approaches that I've seen on here, and I get nothing. I'm embarrassed to say I've been at this for about 2 hours. I don't want to use jQuery because I want to learn JS, so if you could please provide the answer in raw JavaScript and explain your answer I would appreciate it. Thank you.

html:

<div class='col-9 text-right'>
    <ul class='navlinks'>
        <li>Home</li>
        <li>Blog</li>
        <li>About</li>
        <li>Contact</li>

    </ul>
    <p class='cheesebrgr'>click</p>
</div>

JS:

    var fries = function () {
       var milkshake = document.getElementsByTagName(' li ');
        for (i = 0; i < milkshake.length; i++); {
            milkshake[i].classList.add('op1');
        }   
    };
    var napkin = document.getElementsByClassName('cheesebrgr');
    napkin.addEventListener('click', fries);

**just read two more similar questions with no luck.

Answer 1

There are couple of problems in your code

1. document.getElementsByClassName() returns a list so you have to iterate to attach event listener
2. You are misplace ; in and terminated for loop

Code

for (i = 0; i < milkshake.length; i++); //<//misplace semi-colon end of for loop

 var fries = function() { var milkshake = document.getElementsByTagName('li'); for (var i = 0; i < milkshake.length; i++) { milkshake[i].classList.add('op1'); } }; var napkin = document.getElementsByClassName('cheesebrgr'); napkin[0].addEventListener('click', fries); //If you single element with cheesebrgr class //var napkin2 = document.querySelector('.cheesebrgr'); //napkin2.addEventListener('click', fries); 

 .op1 { color: red; } 

 <div class='col-9 text-right'> <ul class='navlinks'> <li>Home</li> <li>Blog</li> <li>About</li> <li>Contact</li> </ul> <p class='cheesebrgr'>click</p> </div>