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

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

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

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

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   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   lt h1 id  h1Tag  gt lalala lt  h1 gt  x000D   lt div id  goy  gt  lt  div gt  x000D   x000D   x000D    This can also be done in pure CSS by adding the hover selector css property to the h1 tag

[javascript] How do I clear inner HTML

Examples related to javascript

Examples related to html

Examples related to innerhtml