change inner HTML
The innerHTML attribute is sometimes a little confusing in its use, I’ve found. For some reason, outerHTML seems to be the best choice for most people, but this isn’t always the case – the proof for this is simply because the innerHTML attribute was included in the HTML specifications, not just the outerHTML attribute.
Use the id attribute to assign the JavaScript commands within the nameon() function to that individual page element. Call the name given as the value of the id attribute as the argument passed to the two functions we’re using to accomplish our goals. We use two events to trigger two separate actions, onMouseOut and onMouseOver.
<html>
<head>
<script type="text/javascript">
function nameon() {
document.getElementById('h2text').innerHTML="WELCOME!";
}
function nameout() {
document.getElementById('h2text').innerHTML="How are you today?";
}
</script>
</head>
<body>
<h2 id="h2text" onMouseOut="nameout()" onMouseOver="nameon()">Mouse over this text!</h2>
</body>
</html>
This is especially useful if you have an action that must change as the user triggers an event. You don’t have to stop with one command, remember, so you can load whatever functionality you’d like within the functions. The innerHTML attribute is used primarily as a text editing directive, but with a little forethought and creativity you can assign DOM style sheet rules when the text is changed. Each set of text you’d like to include as the changed content can have its own style sheet rules applied to it.
|
