SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    document.getElementById() problems

    i have this in my script in the head

    btn = document.getElementById("about");
    alert(btn);

    and i have this in the body

    <td width="125" id="about" onmouseover="P7_autoLayers();btnOver('about')" onmouseout="btnUp('about')">About</td>


    but it alerts null

    I DONT GET IT!!
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  2. #2
    I'm not a human
    Join Date
    Aug 2006
    Location
    India
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    You would have provided the javascript code inside the script tag in the top of the page and then the html code.

    At that point the elements in the html are not parsed and thus not created.
    So better use that inside any function and call that function on the necessary event.

    Or include the script code after the html code.
    Then it will work.
    Regards,
    Vijay
    Follow me on twitter @vijaycbe
    World Holiday Calander || My Cricket Blog

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Make sure there are no spelling errors, and remember that IDs are case sensitive ("about" is different from "About").

    Alerting a DOM Element node won't be very helpful, BTW.
    Birnam wood is come to Dunsinane

  4. #4
    I'm not a human
    Join Date
    Aug 2006
    Location
    India
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would like to put an example for my earlier posting.

    Try my example u will clearly note the difference.

    Code:
    <script language=javascript>
    btn = document.getElementById("about");
    alert(btn);
    </script>
    <table><tr>
    <td width="125" id="about" onmouseover="P7_autoLayers();btnOver('about')" onmouseout="btnUp('about')">About</td></tr></table>
    <script language=javascript>
    btn = document.getElementById("about");
    alert(btn);
    </script>
    Regards,
    Vijay
    Follow me on twitter @vijaycbe
    World Holiday Calander || My Cricket Blog

  5. #5
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok but i also have this function

    Code:
    function btn_over(id) {
    	btn = document.getElementById(id);
    	alert(btn);
    	btn.style.color = "#000000";
    	btn.style.background = "#5CAEAE";
    }
    and if you look at the column it has an onmouseover="btn_over('about'); its the exact same as the id ( i copy and pasted ) i was just alerting to see what javascript sees because whenever i roll over the column i get a javascript error saying "object expected"
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.

  6. #6
    I'm not a human
    Join Date
    Aug 2006
    Location
    India
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by halfasleeps

    ok but i also have this function

    Code:
    function btn_over(id) {
    	btn = document.getElementById(id);
    	alert(btn);
    	btn.style.color = "#000000";
    	btn.style.background = "#5CAEAE";
    }
    The function name you defined "btn_over" but you defined the function name as "btnOver". The function name differs and i think this would be the silly mistake.

    And i tried the following code and it works.


    Code:
    <script language=javascript>
    btn = document.getElementById("about");
    alert(btn);
    function btnOver(id) {
    	btn = document.getElementById(id);
    	alert(btn);
    	btn.style.color = "#000000";
    	btn.style.background = "#5CAEAE";
    }
    </script>
    
    <table><tr>
    <td width="125" id="about" onmouseover="btnOver('about')" onmouseout="btnUp('about')">About</td></tr></table>
    Regards,
    Vijay
    Follow me on twitter @vijaycbe
    World Holiday Calander || My Cricket Blog

  7. #7
    Pragmatic Programmer halfasleeps's Avatar
    Join Date
    Feb 2006
    Location
    Altoona, PA. USA
    Posts
    1,945
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ahh yes what a silly mistake!

    that fixed it right up!
    Altoona Design
    Freelance Flex developer for hire.
    ActionScript Programmer with 8 Years Experience.


Bookmarks

Posting Permissions

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