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 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Using getElementsName to change tag class

    I have a list like this:
    Code:
    <tr>
        <td>Some Text One</td>
    </tr>
    <tr>
        <td>Some Text One</td>
    </tr>
    <tr>
        <td>Some Text One</td>
    </tr>
    When I click a radio button, I want the text to "dim", that is, change color.

    So I have two CSS classes, on and off.

    Here's the JS
    PHP Code:
            function enableCFFID()
            {
                
    document.cartform.cffid.disabled=false;
                
    document.getElementsName('cffidtext').class="cffidon";
            }
            function 
    disableCFFID()
            {
                
    document.cartform.cffid.disabled=true;
                
    document.getElementsByName('cffidtext').class="cffidoff";
            } 
    But, this does not work. What am I doing wrong???

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,444
    Thanks
    17
    Thanked 273 Times in 273 Posts
    There's no way that anyone can make it work without the rest of the code. getElementsName is not a predefined function in javascript, so there must be more code that goes with it. If you post a link to your test page that would be the best choice.

  • #3
    New Coder
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Opps, the code snip was incomplete:
    Code:
    <tr>
        <td name ="cffidtext" class="cffidon">Some Text One</td>
    </tr>
    <tr>
        <td name ="cffidtext" class="cffidon">Some Text One</td>
    </tr>
    <tr>
        <td name ="cffidtext" class="cffidon">Some Text One</td>
    </tr>
    All I want to do is switch the class when a radio button is clicked.

    The important part is the JS function, not what control (radio button or check box or link).

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,444
    Thanks
    17
    Thanked 273 Times in 273 Posts
    What's wrong with posting the entire page code? Then we can copy and paste it to a blank document and work with it. As it is part of the code is still missing. Please put all the code on one page and put that up.

  • #5
    New Coder
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    What's wrong with posting the entire page code? Then we can copy and paste it to a blank document and work with it. As it is part of the code is still missing. Please put all the code on one page and put that up.
    Because it's irrelevant to the question, there's no reason why you would need to see the code for the whole page, most of which has *nothing* to do with how to write a simple function that acts on a single specific set of tags.

    But since you must...
    <html>
    <head>
    <style media="screen" type="text/css">
    .cffidoff {
    font-size: 1.2em;
    color: gray;
    }
    .cffidon {
    font-size: 1.2em;
    color: black;
    }
    </style>
    <script type="text/javascript">
    function enableCFFID()
    {
    document.cartform.cffid.disabled=false;
    document.getElementsByName('cffidtext').setAttribute("class", "cffidon");
    }
    function disableCFFID()
    {
    document.cartform.cffid.disabled=true;
    document.getElementsByName('cffidtext').setAttribute("class", "cffidoff");
    }
    </script>
    </head>
    <body>
    <input type="radio" name="extendCFF" value="no" checked onClick="disableCFFID();">
    <br />
    <input type="radio" name="extendCFF" value="no" checked onClick="ensableCFFID();">
    <table>
    <tr>
    <td name ="cffidtext" class="cffidon">Some Text One</td>
    </tr>
    <tr>
    <td name ="cffidtext" class="cffidon">Some Text One</td>
    </tr>
    <tr>
    <td name ="cffidtext" class="cffidon">Some Text One</td>
    </tr>
    </table>
    </body>
    </html>

    But thanks for you time. Maybe someone else has some suggestions.
    Last edited by Arty Ziff; 11-13-2010 at 07:27 PM.

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,444
    Thanks
    17
    Thanked 273 Times in 273 Posts
    This will get you started
    Code:
    function enableCFFID()
    
    {
    
    //document.cartform.cffid.disabled=false;
    
    var myobj = document.getElementsByName('cffidtext');
    
    myobj[0].className="cffidon";
    
    }
    
    function disableCFFID()
    
    {
    
    //document.cartform.cffid.disabled=true;
    
    var myobj = document.getElementsByName('cffidtext');
    
    myobj[0].className="cffidoff";
    
    }
    Get elements by name will return a collection, you will have to loop over the collection to change all of them. You also have some syntax errors ( spelling ) in the html.

  • Users who have thanked DrDOS for this post:

    Arty Ziff (11-15-2010)

  • #7
    New Coder
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    OK, thanks! Here's the final function, which works very well. You have been a great help.
    PHP Code:
    <script type="text/javascript">
            function 
    enableCFFID() {
                
    document.cartform.cffid.disabled=false;
                var 
    myobj document.getElementsByName('cffidtext');
                
    // Count array elements and loop through them.
                
    for ( var i=myobj.length-1i>=0; --){
                    
    myobj[i].className="cffidon";
                }
            }

            function 
    disableCFFID() {
                
    document.cartform.cffid.disabled=true;
                var 
    myobj document.getElementsByName('cffidtext');
                
    // Count array elements and loop through them.
                
    for ( var i=myobj.length-1i>=0; --){
                    
    myobj[i].className="cffidoff";
                }
            }
        
    </script> 


  •  

    Posting Permissions

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