Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Change <td> class with javascript

  1. #1
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Change <td> class with javascript

    I've been trying to change the class of a <td> (although <tr> or <div> will also work) through a javascript function that runs on pageload. I've been able to call the function under my 'if' conditions, but there are errors in the javascript (my Javascript skills are rather lacking)

    one of my iterations is as follows, where 'activities' is my ID name and 'selectedItem' is the class I'm trying to assign:

    <script type="text/javascript">
    function setActivities() {
    document.activities.setAttribute("class", "selectedItem");
    document.activities.setAttribute("className", "selectedItem");
    return;
    }
    </script>

    ...
    <tr ><td height="25" >
    <div id="activities" ><a href="activities.htm" target="_parent" ><span class="firstLetter">A</span>CTIVITIES</a></div>
    </td></tr>
    ...


    There is a conditional statement based on the parent url the does call the function, but I get the error " 'document.activities' is null or not an object " when I test the page. Same error occurs when I try document.getElementById()

    any help on changing the class of the <td> (or in the above code, <div>) will be greatly appreciated

    Thanks,
    Scot

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Use this script:
    Code:
    function setActivities() { 
    document.getElementById('activities').setAttribute('class','selectedItem'); // Failed on IE
    document.getElementById('activities').className='selectedItem'; // Cross-browser
    }
    To access an element id, you have to use DOM:document.getElementById().
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Code:
    function setActivities() { 
    document.getElementById('activities').className='selectedItem';
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jul 2008
    Posts
    40
    Thanks
    1
    Thanked 4 Times in 4 Posts

    Default Accessing tags by className

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>SomeTitle</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    Code:
    <script type="text/javascript">
    <!--Begin Hiding
    
    function changeActivities( actual_tag, actual_target, your_Activities ) 
    {
      var target_tag = document.getElementsByTagName( actual_tag );
    
    for ( var initiate = 0; initiate < target_tag.length; initiate++ ) 
    
    { 
       if ( target_tag.item( initiate ).className == actual_target ) 
    
    {  target_tag.item( initiate ).style.color = '#C0C0C0';
       target_tag.item( initiate ).item( initiate ).style.backgroundColor = '#444444';
      target_tag.item( initiate ).style.fontWeigth = 'bold';
      target_tag.item( initiate ).style.fontSize = '24px'; 
      target_tag.item( initiate ).innerHTML = your_Activities;
          }
       }
    }
    // Done Hiding -->
    </script>
    Code:
    </head>
    <body>
    <table>
    <tr ><td height="25" >
    <div id="activities" class="mydiv" onclick="changeActivities('div', 'mydiv');" ><a class="myanchor" href="activities.htm" target="_parent" onclick="changeActivities('a', 'myanchor');"><span class="firstLetter" onclick="changeActivities('span', 'firstLetter', 'A');">A</span>CTIVITIES! Now see the firstLetter</a></div>
    </td></tr></table>
    </body></html>
    With this method you can manipulate tags and particular classes on your page... Hope it helps' you. Enjoy...
    Last edited by jscheuer1; 08-02-2008 at 04:41 PM. Reason: remove light color from text portion

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    @rainarts,

    (puts on his moderator hat)

    When posting I notice you often use nearly impossible to read light colors for your text. Please refrain from doing so in the future.

    (takes off his moderator hat)

    Also, this:

    Code:
    .item( initiate )
    may more simply be done as:

    Code:
    [initiate]
    And an element may have more than one class name. See the specification for getting elements by class name (getElementsByClassName):

    http://www.whatwg.org/specs/web-apps...ntsbyclassname

    Which has already been implemented in at least several browsers. A spoof of it (as you have more or less put forth) should follow the specification as closely as possible and be skipped altogether (for reasons of efficiency) in those browsers supporting the native method.

    This is a recent development, a good one that should be taken advantage of.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Holy **** people... Don't make this complicated.
    I've been trying to change the class of a <td> (although <tr> or <div> will also work) through a javascript function that runs on pageload
    In the body, after the table:
    Code:
    <script type="text/javascript">
    document.getElementById("activities")["className"] = "selectedItem";
    </script>
    We know that setAttribute() is not cross-browser because of IE, so there's no need of using it when other browsers can simply use the className attribute.
    Last edited by jscheuer1; 08-03-2008 at 05:02 AM. Reason: change a bad word to ****
    - Mike

  7. The Following User Says Thank You to mburt For This Useful Post:

    iscot (08-06-2008)

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Please read the thread before posting.

    Quote Originally Posted by mburt View Post
    Holy **** people... Don't make this complicated.

    In the body, after the table:
    Code:
    <script type="text/javascript">
    document.getElementById("activities")["className"] = "selectedItem";
    </script>
    Um, That's still more complicated (slightly) than what I already posted:

    Quote Originally Posted by jscheuer1 View Post
    Code:
    function setActivities() { 
    document.getElementById('activities').className='selectedItem';
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    iscot (08-06-2008)

  10. #8
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    I am still getting " 'document.getElementById('...')'is null or not an object "
    If I assign the to a variable (elem) as your link suggests I get the error that elem is null or not an object

  11. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Well, you cannot run:

    Code:
    function setActivities() { 
    document.getElementById('activities').className='selectedItem';
    }
    until after the element with the id of 'activities' has been parsed by the browser. The element with the id of 'activities' must exist, and be the only one on the page with that id.

    Other than that, there could be all sorts of minor typos or other things that could cause a problem, hard to guess. But if you were to put up a demo of the problem on the web, it should be a piece of cake to figure out the problem(s).

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  12. #10
    Join Date
    Aug 2008
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thanks John,
    I should have know to call it after which got rid of the null error, but I'm still not getting the intended result. I put it up on a temporary url

    http://iscotdesigns.com/activities.htm

    Note that the links and pictures do not work as I did not load the unused portions. The files of activities.htm, LeftMenu.html, and default.css are loaded as they are on the final product. The code is in LeftMenu.html which is an iframe within activities.htm

    I have alerts in to show that the javascript has assertained parent.location.href=="http://iscotdesigns.com/activities.htm" and that setActivities() function has been called. "activities" and "selectedItem" are both defined classes in default.css

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
  •