Javascript getElementById

Hello experts,

Working with the getElementById function. I have a page that is working,
copied below, that changes the font color of text in an <h1> tag.
The Javascript  (or is it just an HTML DOM object?) is  inline in the
working page.

I would like to change it to functions being called by script in the
<HEAD> section. Have tried several variations but can't get it to
work.  I also copied the function in the head version below

Thanks.

Allen Pitts, Dallas Texas

+++++++++++++++++ begin mouseOver that works++++++++++++++++++++
<!DOCTYPE html>
<html>
<head>
<Title>JavaScript Font Color Change OnMouseover</Title>
<style type="text/css">
 body {font-family: arial;}
 </style>
</head>


<body>

<h1 id="id1" onmouseover="document.getElementById('id1').style.color='red'" onmouseout="document.getElementById('id1').style.color='black'">
This is an example of inline Javascript. </br>
It uses the H1 DOM object to assign an object ID.</br>
It then uses the onMouseover method of the DOM object  </br>
to change the color of the font.</h1>


</body>
</html>
+++++++++++++++++ end mouseOver that works++++++++++++++++++++

Open in new window


+++++++++++++++++ begin mouseOver that does not work++++++++++++++++++++
<!DOCTYPE html>
<html>
<head>
<Title>JavaScript Font Color Change OnMouseover</Title>
<style type="text/css">
 body {font-family: arial;}
 </style>
<script>
function changeTextRed()
{
document.getElementByID('var_element_ID').style.color='red';
}

function changeTextBlack()
{
document.getElementByID('var_element_ID').style.color='black';
}
</script>


</head>


<body>

<h1 id="var_element_ID" onmouseover="changeTextRed" onmouseout="changeTextBlack">
This uses functions in the <head> section to change the font color. </br>
It uses the H1 DOM object to assign an object ID.</br>
It then uses the onMouseover method of the DOM object  </br>
to change the color of the font.</h1>


</body>
</html>
+++++++++++++++++ end mouseOver that does not work++++++++++++++++++++

Open in new window

LVL 1
Allen PittsBusiness analystAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

erikTsomikSystem Architect, CF programmer Commented:
try changing this line <h1 id="var_element_ID" onmouseover="changeTextRed" onmouseout="changeTextBlack">

to this <h1 id="var_element_ID" onmouseover="changeTextRed();" onmouseout="changeTextBlack();">
Allen PittsBusiness analystAuthor Commented:
Hello Erik,

Tried the suggested change with no luck.

Allen Pitts
erikTsomikSystem Architect, CF programmer Commented:
make the following changes . Because javascript is a case sensitive. Instead using getElementByID use getElementById

<script>
function changeTextRed()
{
document.getElementById('var_element_ID').style.color='red';
}

function changeTextBlack()
{


<h1 id="var_element_ID" onmouseover="changeTextRed();" onmouseout="changeTextBlack();">
This uses functions in the <head> section to change the font color. </br>
It uses the H1 DOM object to assign an object ID.</br>
It then uses the onMouseover method of the DOM object  </br>
to change the color of the font.</h1>
document.getElementById('var_element_ID').style.color='black';
}
</script>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Allen PittsBusiness analystAuthor Commented:
Hello erik,

Excellent answer.
Thanks.

Allen
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.