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>
<script src="indexahnew.js"> 
<link rel="stylesheet" type="text/css" href="first.css">
<div class="container" id='1'><a href="#" class="button" >about me</a>

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

<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&</li>



  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