43

I've been fiddling with this for a while but it won't work and I can't figure out why. Please help. Here is what I have:

<html>
<head>
    <title>lala</title>
</head>
<body>
    <h1 onmouseover="go('The dog is in its shed')" onmouseout="clear()">lalala</h1>
    <div id="goy"></div>
    <script type="text/javascript">
    function go(what) {
        document.getElementById("goy").innerHTML = what;
    }
    function clear() {
        document.getElementById("goy").innerHTML = "";
    }
    </script>
</body>
</html>

The mouseover works and displays the text in the div, but when I move the mouse out of the h1 tag, the text stays there and I don't know why, help would be appreciated.

1

4 Answers 4

50

The problem appears to be that the global symbol clear is already in use and your function doesn't succeed in overriding it. If you change that name to something else (I used blah), it works just fine:

Version using clear which fails:

function go(what) {
    document.getElementById("goy").innerHTML = what;
}
function clear() {
    document.getElementById("goy").innerHTML = "";
}
<h1 onmouseover="go('The dog is in its shed')" onmouseout="clear()">lalala</h1>
<div id="goy"></div>

Version using blah which works:

function go(what) {
    document.getElementById("goy").innerHTML = what;
}
function blah() {
    document.getElementById("goy").innerHTML = "";
}
<h1 onmouseover="go('The dog is in its shed')" onmouseout="blah()">lalala</h1>
<div id="goy"></div>

This is a great illustration of the fundamental principal: Avoid global variables wherever possible. The global namespace in browsers is incredibly crowded, and when conflicts occur, you get weird bugs like this. Now that JavaScript modules are supported in all major environments, you can use those to avoid creating globals and possibly conflicting with them: Top-level declarations in modules aren't globals, they only have module scope (similar to the old way of doing this where you'd wrap all your code in an inline-invoked function).

A corollary to that is to not use old-style onxyz=... attributes to hook up event handlers, because they require globals. Instead, hook things up with code:

<h1 id="the-header">lalala</h1>
<div id="goy"></div>
<script type="module">
// Top-level declarations in modules aren't globals, so this
// `clear` doesn't conflict with the global `clear`
const header = document.getElementById("the-header");
header.addEventListener("mouseover", function() {
    go("The dog is in its shed");
});
header.addEventListener("mouseout", clear);

function go(what) {
    document.getElementById("goy").innerHTML = what;
}
function clear() {
    document.getElementById("goy").innerHTML = "";
}
</script>

4
  • 3
    Thank you so much, i was getting so frustrated. This works perfectly now. Also thanks for the quick response. Mar 23, 2014 at 16:51
  • errors from not knowing globals are unfortunately difficult to debug in many languages.
    – aaaaaa
    Oct 28 at 15:30
  • @aaaaaa - Thankfully here in 2023 we can use modules to avoid creating globals and thus having the kinds of problems the OP did with conflicts. Oct 28 at 15:42
  • Sure, but typically the people who encounter these issues aren't familiar with those tools yet
    – aaaaaa
    Oct 28 at 16:42
2
const destroy = container => {
  document.getElementById(container).innerHTML = '';
};

Faster previous

const destroyFast = container => {
  const el = document.getElementById(container);
  while (el.firstChild) el.removeChild(el.firstChild);
};
0

The h1 tags unfortunately do not receive the onmouseout events.

The simple Javascript snippet below will work for all elements and uses only 1 mouse event.

Note: "The borders in the snippet are applied to provide a visual demarcation of the elements."

document.body.onmousemove = function(){ move("The dog is in its shed"); };

document.body.style.border = "2px solid red";
document.getElementById("h1Tag").style.border = "2px solid blue";

function move(what) {
    if(event.target.id == "h1Tag"){ document.getElementById("goy").innerHTML = "what"; } else { document.getElementById("goy").innerHTML = ""; }
}
<h1 id="h1Tag">lalala</h1>
<div id="goy"></div>

This can also be done in pure CSS by adding the hover selector css property to the h1 tag.

-3

Take a look at this. a clean and simple solution using jQuery.

http://jsfiddle.net/ma2Yd/

    <h1 onmouseover="go('The dog is in its shed')" onmouseout="clear()">lalala</h1>
    <div id="goy"></div>


    <script type="text/javascript">

    $(function() {
       $("h1").on('mouseover', function() {
          $("#goy").text('The dog is in its shed');
       }).on('mouseout', function() {
          $("#goy").text("");
       });
   });
2
  • clean and simple using jQuery but still uses inline js :P
    – andrew
    Mar 23, 2014 at 16:51
  • 10
    I don't see a jQuery tag anywhere. From the javascript tag description: "Unless a tag for a framework/library is also included, a pure JavaScript answer is expected." Mar 23, 2014 at 16:51

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.