Web Analytics Made Easy -
StatCounter IE Works/ Firefox doesn't: Javascript getElementbyId 'not defined error' - CodingForum

Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • IE Works/ Firefox doesn't: Javascript getElementbyId 'not defined error'

    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>

  • #2
    Try
    Code:
    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';
    }
    Code:
    <a href="#" style="color:#008000"
    onmouseover="addUnderline([ICODE]'orange','blue'[/ICODE]);"
    onmouseout="removeUnderline([ICODE]'orange','blue'[/ICODE]);"><span style="color:#FF6600;" id="orange">Link Color and underline change using javascript</span><span style="color:#000099;" id="blue">function</span></a>
    Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

    Comment


    • #3
      Problem Solved

      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.

      Comment


      • #4
        Isn't that as simple as
        Code:
        <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>
        Code:
        <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)
        Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

        Comment

        Working...
        X