...

View Full Version : IE Works/ Firefox doesn't: Javascript getElementbyId 'not defined error'



BeggarCollide
04-15-2009, 08:28 AM
Appreciate any help with this: I wanted to create 1 link that has 2 colors and the underline only appears onMouseover. Also, the underline is also the same 2 colors respectively.

Here is my source code: (It works in IE 7 but not Firefox)

The error I get is: orange is not defined. [orange is one of my Id's and function argument values] I'm no Javascript expert so please forgive my ignorance and thanks in advance for any assistance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Javascript Change Link Text Color Onmouseover</title>
<style type="text/css">
a {
font-weight:bold;
font-family:verdana;
text-decoration:none;
}
#joe {color:#99CC00;
}
#mary {color:#CC0099;
}
</style>

<script type="text/javascript" language="JavaScript">
function addUnderline(idObj1,idObj2)
{
document.getElementById(idObj1.id).style.textDecoration='underline';
document.getElementById(idObj2.id).style.textDecoration='underline';
}
function removeUnderline(idObj1,idObj2)
{
document.getElementById(idObj1.id).style.textDecoration='none';
document.getElementById(idObj2.id).style.textDecoration='none';
}
</script>
</head>
<body>
<p><br />
<br />
<a href="#" style="color:#008000"
onmouseover="addUnderline(orange,blue);"
onmouseout="removeUnderline(orange,blue);"><span style="color:#FF6600;" id="orange">Link Color and underline change using javascript</span><span style="color:#000099;" id="blue">function</span></a></p>
</body>
</html>

abduraooft
04-15-2009, 09:04 AM
Try

function addUnderline(idObj1,idObj2)
{
document.getElementById(idObj1).style.textDecoration='underline';
document.getElementById(idObj2).style.textDecoration='underline';
}
function removeUnderline(idObj1,idObj2)
{
document.getElementById(idObj1).style.textDecoration='none';
document.getElementById(idObj2).style.textDecoration='none';
}


<a href="#" style="color:#008000"
onmouseover="addUnderline('orange','blue');"
onmouseout="removeUnderline('orange','blue');"><span style="color:#FF6600;" id="orange">Link Color and underline change using javascript</span><span style="color:#000099;" id="blue">function</span></a>

BeggarCollide
04-16-2009, 04:29 AM
Hey, abduraooft,


Thanks a Trillion! That worked like a charm. So... I'm guessing Firefox is probably interpreting the Javascript correctly and IE is just letting faulty code slide...

then again -> adding the '.id' to a variable called by a function is that not kosher? Guess not because what you gave me worked.

Also, after seeing this do you think there is anyway to perform that functionality without using javascript? I'm stumped. It seems like the <a></a> container takes the dominance in any css scenario, even if you put a span in the middle of it.

abduraooft
04-16-2009, 10:28 AM
Isn't that as simple as

<style type="text/css">
a.mylink{
color:#008000;
text-decoration:none;
}
a.mylink:hover span{
text-decoration:underline;
}
#orange{
color:#FF6600;
}
#blue{
color:#000099;
}
</style>

<a href="#" class="mylink">
<span id="orange">
Link Color and underline change using javascript</span>
<span id="blue">function</span>
</a> ?
(100% reliable unlike the javascript method)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum