www.webdeveloper.com
Results 1 to 9 of 9

Thread: [RESOLVED] Going Nutz here with .getElementById

  1. #1
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,301

    resolved [RESOLVED] Going Nutz here with .getElementById

    Ok, picture this...

    Table

    Each cell of the table has an id tag that has been manually set.

    I use document.getElementById( targetID ); to hook the cell.

    targetID is generated from a function that I have tried with lots of variants and it returns an ID within the range of 0,1 to 6,5 (bit like x and y cords. This part I know works but the problems start with trying to apply properties to the hooked element.

    for example:

    Code:
    t = document.getElementById( targetID );
    t.style.style.backgroundColor = "#FFFF66";
    results in the following error in the console
    "Uncaught TypeError: Cannot read property 'style' of null "

    And this is using an example directly off the W3Schools site.

    I get the same when I try to access or set the elements colour by its .className property.

    So...

    Have I gone nuts or has JavaScript no dropped that method in favor of something else?

    Does not matter if I try to put something in to that cell, the same error keeps on popping up.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  2. #2
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Quote Originally Posted by \\.\ View Post
    ...

    targetID is generated from a function that I have tried with lots of variants and it returns an ID within the range of 0,1 to 6,5...
    Id names shouldn't start with a number but it can contain numbers, hyphens, underscore...

    You got one ".style" more than you need. Try change your code to look like this:

    Code:
    t = document.getElementById( targetID );
    t.style.backgroundColor = "#FFFF66";

  3. #3
    Join Date
    Jul 2008
    Posts
    37
    try

    t = document.getElementById( 'targetID' );

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,301
    None of the ID's start with a number, I was trying to illustrate that all results fall within a set range which fits the ID pattern, x3_y4 is the type of result the target

    Sorry about the t.style.style, it is t.style.backgroundColour =... that was just a typo on my part, been a long day very tired.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  5. #5
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Upload your code, surely someone will help...

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,301
    This is it.

    Code:
    window.onload = function(){
    
    	targetID = calc_block(new Date().getTime());
    	
    	t = document.getElementById( targetID );
    	t.innerText = "<b>"+new Date().getDate()+"</b>";
    	t.style.backgroundColor = "#FFFF66";
    
    }
    The function calc_block returns a reference to a table cell

    I have used alert( targetID ) to see that the resulting bloc calculation is within a specific range and it returns every time a reference in the table, today will produce x4_y4 and that reference exists, however both FireFox and Chrome result in an error as previously stated. Tomorrow will result in x5_y4.

    I am really too tired to try figuring out the issue and if anyone figures it out, let me know.

    G'Night folks.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  7. #7
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Obviously the error is hidden somewhere in the "calc_block" function because you got "Uncaught TypeError: Cannot read property 'style' of null" which indicates unknown or missing value. So JavaScript cannot access your "t" object and set its properties because "t" object doesn't exists (is not properly referenced).

    Also when defining a variable that is meant to latter hold an object, it is advisable to initialize the variable to null as opposed to anything else. That way you can explicitly check for the value null to determine if the variable has been filled with an object reference at a latter time.

    So you could do:

    Code:
    var targetID = null;
    targetID = calc_block(new Date().getTime());
    
    if (targetID != null) {
        //do something;
    }
    What type of data does your calc_block returns? Is it a date?
    Last edited by tech_soul8; 09-26-2013 at 11:59 PM.

  8. #8
    Join Date
    Mar 2011
    Posts
    1,137
    It would help to see the entire page. I agree with tech_soul8 that the value of 't' is probably null because the call to getElementById() failed. The first thing I'd suggest would be to check that you use the same code to generate the value of the 'id' attribute for your <td> element is identical to the code you use for the calc_block() function. If it is identical, checking 'View Source' on the live page might uncover a stray character being inserted in the 'id' value.

    Note, too, that 'innerText' is not fully cross-browser compliant. You might want to use 'innerHTML' instead.
    Rick Trethewey
    Rainbo Design

  9. #9
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,301
    Ok, thanks for the help but we are veering away from the problem.

    After reviewing the code so many times, I rebooted and the problem disappeared.

    Nothing wrong with the code at all.

    So thanks.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles