HTML link to external javascript not working

Tags: ,



I am new to JavaScript. I created an external script for my webpage but it’s not working. But when I write it inside the html it works fine. Here is my script.

window.onload = function(){
document.getElementById("demo").onmouseover = function() {mouseOver()};
document.getElementById("demo").onmouseout = function() {mouseOut()};
function mouseOver(){
    document.getElementById("dem").style.display = "inline";
}
function mouseOut(){
    document.getElementById("dem").style.display = "none";
}
};

Here is my HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="indexahnew.js"> 
</script>
<link rel="stylesheet" type="text/css" href="first.css">
<div class="container" id='1'><a href="#" class="button" >about me</a>

<a href="www.google.com"; class="button"; id="demo">contact</a>
<a href="www.google.com" class="button" >canvas</a>
<a href="group.html" class="button" >our group</a>
<a href="www.google.com" class="button" >my blog</a></div>

</head>
<body background= 'green.jpg'; >
<div class="contact" style="display:none;" id="dem">
<ul><li>Contact number&nbsp: 1234567890</li>
<li>    Email &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp:email@gmail.com</li>
</ul>
</div>

</body>
</html>

Answer

  1. Check Chrome Developer to see if the js file is being included
  2. Is the path correct? Should it be ‘/indexahnew.js’?
  3. Remove the new line in the script tag
  4. Add the script tag to the end of your html body instead of the head (best practice)


Source: stackoverflow