How do I clear inner HTML

Question

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    lt html gt   lt head gt       lt title gt lala lt  title gt   lt  head gt   lt body gt       lt h1 onmouseover  go  The dog is in its shed    onmouseout  clear    gt lalala lt  h1 gt       lt div id  goy  gt  lt  div gt       lt script type  text javascript  gt      function go what            document getElementById  goy   innerHTML   what            function clear             document getElementById  goy   innerHTML                  lt  script gt   lt  body gt   lt  html gt    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

User · Answer

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."

_x000D_

document.body.onmousemove = function(){ move("The dog is in its shed"); };_x000D_
_x000D_
document.body.style.border = "2px solid red";_x000D_
document.getElementById("h1Tag").style.border = "2px solid blue";_x000D_
_x000D_
function move(what) {_x000D_
    if(event.target.id == "h1Tag"){ document.getElementById("goy").innerHTML = "what"; } else { document.getElementById("goy").innerHTML = ""; }_x000D_
}

_x000D_

<h1 id="h1Tag">lalala</h1>_x000D_
<div id="goy"></div>

_x000D_

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

User · Answer

const destroy   container   gt      document getElementById container  innerHTML               Faster previous   const destroyFast   container   gt      const el   document getElementById container     while  el firstChild  el removeChild el firstChild

User · Answer

Take a look at this  a clean and simple solution using jQuery   http   jsfiddle net ma2Yd        lt h1 onmouseover  go  The dog is in its shed    onmouseout  clear    gt lalala lt  h1 gt       lt div id  goy  gt  lt  div gt         lt script type  text javascript  gt         function               h1   on  mouseover   function                   goy   text  The dog is in its shed              on  mouseout   function                   goy   text

User · Answer

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   Live  Version using clear which fails   Version using blah which works   lt html gt   lt head gt       lt title gt lala lt  title gt   lt  head gt   lt body gt       lt h1 onmouseover  go  The dog is in its shed    onmouseout  blah    gt lalala lt  h1 gt       lt div id  goy  gt  lt  div gt       lt script type  text javascript  gt      function go what            document getElementById  goy   innerHTML   what            function blah             document getElementById  goy   innerHTML                  lt  script gt   lt  body gt   lt  html gt    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   A corollary to that is to not use old-style onxyz     attributes to hook up event handlers  because they require globals  Instead  at least use code to hook things up  Live Copy   lt html gt   lt head gt       lt title gt lala lt  title gt   lt  head gt   lt body gt       lt h1 id  the-header  gt lalala lt  h1 gt       lt div id  goy  gt  lt  div gt       lt script type  text javascript  gt           Scoping function makes the declarations within          it  not  globals        function            var header   document getElementById  the-header            header onmouseover   function               go  The dog is in its shed                       header onmouseout   clear           function go what              document getElementById  goy   innerHTML   what                    function clear               document getElementById  goy   innerHTML                                  lt  script gt   lt  body gt   lt  html gt       and even better  use DOM2 s addEventListener  or attachEvent on IE8 and earlier  so you can have multiple handlers for an event on an element

[javascript] How do I clear inner HTML

Examples related to javascript

Examples related to html

Examples related to innerhtml