Question

FIX: I linked to the wrong script, very sorry for this.

I have my script file linked correctly (at least I think so). Here's the link:

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

This link is right before the closing body tag. I have tried placing this link in the head section but that doesn't help.

Here is the JS code that's in that script file:

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
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');
      }
    }
  }
}

My HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>title</title>


    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

    </head>

    <body>

    -Content-

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

    </body>

This script is for my push right menu on my website.

Any help, thanks! :D

UPDATE: I have added an alert into the script and that works but my menu still doesn't work?

Menu HTML:

        <nav id="menu">
            <ul>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="index.html">Home</a></li>
            </ul>
        </nav>

Answer 1

different browsers handle events differently. this is why you should use jQuery because it takes care of all the differences for you. This function should do it for you in plain JS..

function on(elem,eventType,handler){
    if (elem.addEventListener){
        elem.addEventListener (eventType,handler,false);
     }else if (elem.attachEvent){
        elem.attachEvent ('on'+eventType,handler);
    }
}

on(window, "click", function(e){
    // .. do stuff
});

JavaScript not loading?

1 个答案: