En mi título, escribí hamburger dd pero ninguno de mis componentes parece estar respondiendo cuando hago clic en ellos. No tengo idea de por qué sucede esto y me encantaría que alguien aquí pudiera ayudarme. (En resumen, no pasa nada cuando hago clic en el menú de hamburguesas).
<!DOCTYPE html> <html lang="en"> <head> <title>MY CSS WEBSITE</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <ul class="topnav" id="dropdownClick"> <li> <a href="#home">Home</a> </li> <li> <a href="#about">About</a> </li> <li> <a href="#news">News</a> </li> <li> <a href="#contact">Contact</a> </li> <li class="topnav-right"> <a href="#signUp">Sign Up</a> </li> <li class="topnav-right"> <a href="#signIn">Sign In</a> </li> <li class="dropdownIcon"> <a href="javascript:void(0)" onclick="dropdownMenu">☰</a> </li> </ul> </nav> <script> function dropdownMenu(){ console.log(hello); var x = document.getElementById("dropdownClick"); if(ddc.className === "topnav"){ x.className += " responsive"; } /*change topnav to topnav.responsive*/ else{ x.className = "topnav"; } } </script> </body>Tienes bastantes problemas en tu js. En primer lugar, debe asegurarse de mantener la coherencia de los nombres de las variables. (Estaba usando ddc en lugar de x en algunos lugares. Además, asegúrese de que las cadenas estén entre comillas, de lo contrario, se tratan como variables.
Código fijo:
<!DOCTYPE html> <html lang="en"> <head> <title>MY CSS WEBSITE</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <ul class="topnav" id="dropdownClick"> <li> <a href="#home">Home</a> </li> <li> <a href="#about">About</a> </li> <li> <a href="#news">News</a> </li> <li> <a href="#contact">Contact</a> </li> <li class="topnav-right"> <a href="#signUp">Sign Up</a> </li> <li class="topnav-right"> <a href="#signIn">Sign In</a> </li> <li class="dropdownIcon"> <a href="javascript:dropdownMenu()">☰</a> </li> </ul> </nav> <script> function dropdownMenu(){ console.log("hello"); var x = document.getElementById("dropdownClick"); if(x.className === "topnav"){ x.className += " responsive"; } /*change topnav to topnav.responsive*/ else{ x.className = "topnav"; } } </script> </body>