Use innerHTML to Change Text on a Page

To use innerHTML to change text on a page:

<p id=hu>This text will change!</p>

<script type="text/javascript">
function goHo() {
hu.innerHTML="Hello";
}
</script>


<a href="#" onMouseOver="javascript:goHo()" onMouseOut="javascript:hu.innerHTML='Goodbye'">Say Hi</a>


-We used the id tag to name our paragraph hu
-We created our function and named it goHo because it's easy to type.
-We used our hu name to define Javascript's built-in innerHTML property.
-We said that wherever the hu tag is in our HTML, it will have a value of Hello when this function is called.

-We then wrote a link tag.
-We used Javascript's built-in onMouseOver handler, to call our function.
-We then used Javascript's built-in onMouseOut handler to change our hu.innerHTML to Goodbye


NOTES: I wrote the Javascript right into the onMouseOut handler to show the different ways the innerHTML property can be used. Note the Goodbye is in single quotes because the entire onMouseOut event should be wrapped in double quotes.



Free Copy and Paste Javascript Code:

<script type="text/javascript">
<!--
function goHo() {
hu.innerHTML="Hello";
}
-->
</script>

<p id=hu>This text will change!</p>

<a href="#" onMouseOver="javascript:goHo()" onMouseOut="javascript:hu.innerHTML='Goodbye'">Say Hi</a>



Resources:
Use OnMouseOver in Javascript
Create a Function in Javascript
Call your Function in Javascript
Use onMouseOut in Javascript


Click HERE to comment or discuss at iLoveTheCode GOOGLE Group

Previous Article: Focus a Window with self.focus in Javascript

Next Article: Get Query String Using Javascript

CSS Eric Meyer New $29.69	Bulletproof Web Design Dan Cederholm New $23.99	Head First HTML with CSS & XHTML Eric Freeman, Elis... New $23.99
CSS David McFarland New $23.09	HTML & XHTML Chuck Musciano, Bi... New $29.99	JavaScript David Flanagan New $31.49
HTML Gary B. Shelly, Th... New $84.55	HTML, XHTML, and CSS, Sixth Edition ... Elizabeth Castro New $23.09	Dreamweaver CS3 David McFarland New $29.69

Privacy Information