How do I clear inner HTML

Asked 23/3, 2014 at 16:42 Answered 14/8, 2018 at 10:56

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.

Symons answered 23/3, 2014 at 16:42 Comment(1)

Please see my answer here: https://mcmap.net/q/89003/-onclick-quot-quot-vs-event-handler. In your case, clear refers to document.clear: developer.mozilla.org/en-US/docs/Web/API/document.clear – Loquacity 23/3, 2014 at 16:49

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>

Ragged answered 23/3, 2014 at 16:48 Comment(4)

Thank you so much, i was getting so frustrated. This works perfectly now. Also thanks for the quick response. – Symons 23/3, 2014 at 16:51

errors from not knowing globals are unfortunately difficult to debug in many languages. – Cuticle 28/10, 2023 at 15:30

@Cuticle - Thankfully here in 2023 we can use modules to avoid creating globals and thus having the kinds of problems the OP did with conflicts. – Ragged 28/10, 2023 at 15:42

Sure, but typically the people who encounter these issues aren't familiar with those tools yet – Cuticle 28/10, 2023 at 16:42

const destroy = container => {
  document.getElementById(container).innerHTML = '';
};

Faster previous

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

Yaekoyael answered 14/8, 2018 at 8:1 Comment(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.

Noonberg answered 14/8, 2018 at 10:56 Comment(0)

-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("");
       });
   });

Wilburn answered 23/3, 2014 at 16:50 Comment(2)

clean and simple using jQuery but still uses inline js :P – Pharyngology 23/3, 2014 at 16:51

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." – Loquacity 23/3, 2014 at 16:51

Recommended topics

Hot tags