I can't get my javascript to toggle my login dropdown. Why is javascript not connecting to my html?

Question

I checked and rechecked my script link but it's not connecting to html. I must be doing something wrong but I don't see it.

I'm trying to connect javascript to the Log in button, so it shows and hides the log in form. '''

<script type="text/javascript" src="/js/script.js"></script>

 function myFunction() { document.getElementsById("myDropdown").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown_content"); var i; for (i = 0; i < dropdowns.lenth; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } 

  <div id="login"> <ul class="login_signup"> <li class="dropdown"> <button onclick="myFunction()" class="dropbtn"> Log in <span>▼</span> </button> <div id="myDropdown" class="dropdown_content"> <form> <fieldset id="inputs"> <input id="username" type="email" name="Email" placeholder="Your email address" required> <input id="password" type="password" name="Password" placeholder="Password" required> </fieldset> <fieldset id="actions"> <input type="submit" id="submit" value="Log in"> <label><input type="checkbox" checked="checked"> Keep me signed in</label> </fieldset> </form> </div> </li> <li id="signup"> <a href="">Sign up</a> </li> </ul> </div> 

I would like to connect this js to the login button in html.

Answer 1

The function is getElementById() without the s in Element s , because there can be only one element with a given ID

Also, you if you want to use relative paths you should remove the / from src="/js/script.js" . / means start from the root path of your web server, and without it it means search the file starting from the file you are on right now.

 function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown_content"); var i; for (i = 0; i < dropdowns.lenth; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } 

  <style> .dropdown_content { display: none; } .show { display: inherit !important; } </style> <div id="login"> <ul class="login_signup"> <li class="dropdown"> <button onclick="myFunction()" class="dropbtn"> Log in <span>▼</span> </button> <div id="myDropdown" class="dropdown_content"> <form> <fieldset id="inputs"> <input id="username" type="email" name="Email" placeholder="Your email address" required> <input id="password" type="password" name="Password" placeholder="Password" required> </fieldset> <fieldset id="actions"> <input type="submit" id="submit" value="Log in"> <label><input type="checkbox" checked="checked"> Keep me signed in</label> </fieldset> </form> </div> </li> <li id="signup"> <a href="">Sign up</a> </li> </ul> </div> 

Answer 2

您可以将javascript路径从src="/js/script.js"更改为src="./js/script.js" 。

Answer 3

Try

src="js/script.js"

or

src="../js/script.js"

If you can share your folder structure I can update my answer