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="goHo()" onMouseOut="hu.innerHTML='Goodbye'">Say Hi</a>


-We used HTML's id attribute to name our paragraph hu
-We created our function and named it goHo because it's easy to type.
-We then used our hu attribute 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="goHo()" onMouseOut="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

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

Next Article: Get Query String Using Javascript