JavaScript classList funktioniert nicht. Ich habe verschiedene Methoden ausprobiert, die ich hier gesehen habe

Question

Ich bin neu in JS und aus irgendeinem Grund kann ich nicht für das Leben von mir bekommen einen einfachen Knopf, um eine Klasse zu meinen Links hinzuzufügen. Ich habe ein paar verschiedene Ansätze ausprobiert, die ich hier gesehen habe, und ich bekomme nichts. Es ist mir peinlich zu sagen, dass ich seit ungefähr 2 Stunden dabei bin. Ich möchte jQuery nicht verwenden, weil ich JS lernen möchte. Wenn Sie also die Antwort in Roh-JavaScript bereitstellen und Ihre Antwort erklären könnten, würde ich es begrüßen. Vielen Dank.

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); 

** lesen nur noch zwei ähnliche Fragen ohne Glück.

Answer 1

Es gibt einige Probleme in Ihrem Code

1. document.getElementsByClassName() eine Liste zurück, so dass Sie Ereignis-Listener
2. Sie sind misplace ; in und beendet for Schleife

iterieren müssen befestigen 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>