0

I have the following inline javascript (to show a version on mouseover) that I have working. I've been told it needs to be external, so I created a .js file and linked to it in the head, removed the tags but I can't get it working as a linked js file. I'm very new to this, and I'm sure it is something really simple that I'm not understanding, any help is appreciated.

<!DOCTYPE html>

<html>
<head>
  <title>template_test</title>
  <link href="styles.css" rel="stylesheet" type="text/css" media="screen">
</head>

<body>
  <div class="section group box">
    <img src="icon-student.png" width="75" height="75">

    <h1>Sub Title for Section</h1>

    <p>Ut molestie mattis ultrices. Suspendisse malesuada turpis non neque tincidunt
    dignissim. Curabitur venenatis vehicula augue, ac venenatis felis aliquam ut.
    Curabitur aliquet turpis nec lorem commodo.</p>
  </div>

  <div id="versionHidden" onmouseover=
  "document.getElementById('hiddenVersion').style.display = 'block';" onmouseout=
  "document.getElementById('hiddenVersion').style.display = 'none';">
    <div id="hiddenVersion" style="display: none;">
      Version 2.0
    </div>
  </div>

  <div id="clear">
    <br>
  </div>
</body>
</html>
1
  • 1
    show us what you tried.
    – jdigital
    Feb 6, 2014 at 2:52

3 Answers 3

2

Added to the <head> of the HTML:

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

In the external JavaScript file (per my example, "myJSFile.js"):

window.addEventListener('DOMContentLoaded', function () {
    document.getElementById('versionHidden').addEventListener('mouseover', function () {
       document.getElementById('hiddenVersion').style.display= 'block';
    }, false);

    document.getElementById('versionHidden').addEventListener('mouseout', function () {
      document.getElementById('hiddenVersion').style.display = 'none';
    }, false);
}, false);

The advantage of doing this is that you don't need anything inline and can therefore have full control of the behaviors in your web app without needing to mess with the document structure.

And we add code to wait for the DOMContentLoaded event when we put our script tag in the head (as opposed to the bottom of the page) because there is no "versionHidden" element at the time the browser renders the script tag if the script tag is before the "versionHidden" element, so document.getElementById('versionHidden') would be null if we didn't wait for the DOMContentLoaded event.

Putting a script tag at the end of the document avoids the need for DOMContentLoaded, and is recommended by Yahoo for performance (as the browser doesn't block loading and rendering the rest of your page content while the script is running), but 1) You may not want the page visible until the script is loaded, and 2) Some purists (like myself) feel that scripts are not really a part of the document, so should not, for conceptual as opposed to practical reasons, be put in the body but in the head.

Note that the code above requires a modern browser to work; to support older browsers, consider using jQuery.

Note however that the above code won't be very useful since using display none will mean the element is removed entirely, so there is nothing to mouseover!

You will probably want to use this instead:

window.addEventListener('DOMContentLoaded', function () {
    document.getElementById('versionHidden').addEventListener('mouseover', function () {
       document.getElementById('hiddenVersion').style.visibility = 'visible';
    }, false);

    document.getElementById('versionHidden').addEventListener('mouseout', function () {
      document.getElementById('hiddenVersion').style.visibility = 'hidden';
    }, false);
}, false);

...and change your HTML element to:

<div id="hiddenVersion" style="visibility: hidden">

This reserves the space for the item, but just makes it hidden.

2
  • I've made an update as I don't think you want to use display:none here. Feb 6, 2014 at 3:08
  • 1
    sidenote: recommend to use jQuery is good, however, jQuery 2 will drop support of old browsers, especially IE7 & 8.
    – Raptor
    Feb 6, 2014 at 3:09
0

Wrap your mouse events in a function in an external .js file...

function mouse(d) {
    document.getElementById('hiddenVersion').style.display = d;
}

Then on your versionHidden element...

<div id="versionHidden" onmouseover="mouse('block');" onmouseout="mouse('none');">
5
  • not recommended to use onmouseover and onmouseout today. In modern practice, we should separate JS from HTML codes.
    – Raptor
    Feb 6, 2014 at 3:07
  • This worked very well, thanks. Is the (d) just a placeholder of sorts, meaning it could have been (k) or similar, or does the (d) mean something specific in JS? Feb 6, 2014 at 3:16
  • @ConnorLaCombe big theory behind this concept, which is called Separation of presentation and content. MVC is one of the examples.
    – Raptor
    Feb 6, 2014 at 3:21
  • @user3277801 Yep, d is just the variable I picked. You can pass whatever variables you want to the function. Feb 6, 2014 at 3:22
  • @ShivanRaptor Agree to disagree :) Feb 6, 2014 at 3:26
0

There is no JS file in the head of the code you posted. To properly link a JS file do it like this:

<head>
    <script type="text/javascript" src="myscript.js"></script>
</head>

More info here: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

1
  • My apologies, I wasn't clear, I did that, but I wasn't able to get the external js to work using the same code. Apparently the code must be altered, and significantly based on Brett's example, which did work for me. Feb 6, 2014 at 3:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.