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');
}
}
}
};
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 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 Commented Jan 1, 2017 at 0:11
- 2 What is the error when it does not run? – epascarello Commented Jan 1, 2017 at 0:11
- @Daniek you assume much. – willoller Commented Jan 1, 2017 at 0:14
3 Answers
Reset to default 7Try
document.addEventListener('DOMContentLoaded', function() {
// do stuff here
}, false);
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.
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.