javascript only works in <script> tags, not js file

Question

I'm making a clickable dropdown menu. But when I run the javascript in its own js file the js doesn't work. However, when I put the javascript in tags in my html document, the menu works perfectly fine. Does anyone know how to make the javascript work in its own js file?

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.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
};

html code? you should call that javascript after your html is processed. body onload="init();" or similar would due the trick. — washcloth
– washcloth, Commented Jan 1, 2017 at 0:08
The issue is probably how you are including the script in your file - can you include the html where your <script> tag references the javascript file? — willoller
– willoller, Commented Jan 1, 2017 at 0:11

Ronnie Smith · Accepted Answer · 2017-01-01 00:32:54Z

7

Try

document.addEventListener('DOMContentLoaded', function() {
  // do stuff here

}, false);

answered Jan 1, 2017 at 0:32

Ronnie Smith

18.8k7 gold badges89 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

COOKIE Over a year ago

where do you want me to put this?

Ronnie Smith Over a year ago

paste your js into where it says do stuff here

Ronnie Smith Over a year ago

add a line to your js console.log('I just ran');. Open your web developer tools console. If you don't see I just ran, your js ain't firing. You can put a console.log anywhere for debugging purposes. Good luck.

COOKIE Over a year ago

I just ran it in chrome. It shows the whole line. So when I open it up it shows "console.log('I just ran');"

HelpNeeder · Accepted Answer · 2017-01-01 00:10:09Z

2

You need to create a JS file called script.js and then add this to HTML document before closing body tag:

<script src="script.js"></script>

I assume you are not including the script correctly. Check your console for errors.

Also, if you are including script in the head section, it could be loaded before the HTML, therefore the selectors possibly could not be found. Including script at the end of the HTML document (before closing body tag) would assure the document is loaded before script is executed.

edited Jan 1, 2017 at 0:10

answered Jan 1, 2017 at 0:07

HelpNeeder

6,52026 gold badges95 silver badges160 bronze badges

7 Comments

COOKIE Over a year ago

I named my js document something else but I do have that

HelpNeeder Over a year ago

check if script is accessible through browser. Get the URL of the script, and make sure it renders when you try to call it from the browser.

HelpNeeder Over a year ago

In Firefox, click on F12, then click on Network tag to see if your script is being rendered with code 200.

COOKIE Over a year ago

Do you want me top open the script in my browser? When I do it's just a blank page

HelpNeeder Over a year ago

That's your problem. Perhaps you have duplicate script located in other directory. Check your FTP for directory and file location.

|

Milk · Accepted Answer · 2017-01-01 07:01:26Z

0

In order to execute JavaScript from an external file, you will need to include the file in the HTML file using something like the following:

<head>
        <script type="text/javascript" src="location/of/file/filename.js"></script>
</head>

From there, make the HTML element you are using call the JavaScript function you are wishing to execute.

Example:

<button onclick="functionName()">Click!</button>

This will then go to the function you are calling in the JavaScript file and execute the body of the function.

answered Jan 1, 2017 at 7:01

Milk

12 bronze badges

Collectives™ on Stack Overflow

javascript only works in <script> tags, not js file

3 Answers 3

4 Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related