Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Angry 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
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    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('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>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    BeggarCollide (04-16-2009)

  • #3
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up 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.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    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)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •