Menu
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.
961
There are two methods to perform this function, one by using innerHTML property and other by using firstChild property and removeChild() method. Method 1: Using innerHTML Property: The DOM innerHTML property is used to set or return the HTML content of an element. This method set the innerHTML property to none.
innerHTML. The Element property innerHTML gets or sets the HTML or XML markup contained within the element. To insert the HTML into the document rather than replace the contents of an element, use the method insertAdjacentHTML() .
To clear the contents of a div element, set the element's textContent property to an empty string, e.g. div. textContent = '' . Setting textContent on the element removes all of its children and replaces them with a single text node of the provided value. Copied!
'innerHTML' Presents a Security RiskThe use of innerHTML creates a potential security risk for your website. Malicious users can use cross-site scripting (XSS) to add malicious client-side scripts that steal private user information stored in session cookies. You can read the MDN documentation on innerHTML .
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
<html> <head> <title>lala</title> </head> <body> <h1 onmouseover="go('The dog is in its shed')" onmouseout="blah()">lalala</h1> <div id="goy"></div> <script type="text/javascript"> function go(what) { document.getElementById("goy").innerHTML = what; } function blah() { document.getElementById("goy").innerHTML = ""; } </script> </body> </html> 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
<html> <head> <title>lala</title> </head> <body> <h1 id="the-header">lalala</h1> <div id="goy"></div> <script type="text/javascript"> // 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 = ""; } })(); </script> </body> </html> ...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.
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
