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
    DtD
    DtD is offline
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Error! 'style' is null or not an object, when useing id more than once... (Answered)

    On my website (it is a website for a project I am wokring on), I'm going to list news of diffrent types (Blog, General, New Realease, ect.) but I want to allow readers to filter what is show, so I have some check boxes for each group, then the news articles, blog entries, ect. are displayed below. But when I have more than one of somthing, there is an error:
    Code:
    Error: 'style' is null or not an object.
    But if I have only one of everything it works fine, heres the code:

    The functions for TOGGLEing the articles:
    Code:
    function TOGGLE(THS,TGL)
    {
    if (THS.checked==1) {TGL.style.display=''}else{TGL.style.display='none'}
    }
    That if statment line is where the error occours.

    Here is the html of the news area: (NOTE: some extra formatting was removed)
    Code:
    <INPUT TYPE="checkbox" CHECKED="checked" ONCLICK="TOGGLE(this,NEWS_GENERAL)">General News
    <INPUT TYPE="checkbox" CHECKED="checked" ONCLICK="TOGGLE(this,NEWS_REALEASE)">New Realeases
    <INPUT TYPE="checkbox" CHECKED="checked" ONCLICK="TOGGLE(this,NEWS_BLOG)">Blog
    
    <TABLE>
    	 <TR><TD ID="NEWS_BLOG">Blog post</TD></TR>
    	 <TR><TD ID="NEWS_REALEASE">Realease!</TD></TR>
    	 <TR><TD ID="NEWS_GENERAL">General News #2</TD></TR>
    	 <TR><TD ID="NEWS_GENERAL">General News #1</TD></TR>
    </TABLE>
    If you put that in an HTML file, clicking "General News" throws the error.

    ~DtD
    Last edited by DtD; 11-11-2006 at 10:53 PM.

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Id's are unique for the document, so you're not allowed to to have more than one element with any given id per document. Any behavior for multiple ids is undefined, and in other words cannot be counted on.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    DtD
    DtD is offline
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, is there any way I can still do what I want?

    ~DtD

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Give the general news sections different ids, and toggle both of them. Or give them a shared container that you place the ID on instead, and traverse from there.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    DtD
    DtD is offline
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I understand the first one, I guess it won't be bad when the page is generated by PHP.

    But I didn't understand the second one, but I think that means grouping articles by type together, which I don't want.

    ~DtD
    Thanks

  • #6
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can try this out. Unfortuantely IE doesn't support getElementsByName very well so you really can't use that.

    Anyway, this is one way to do it.

    david_kw

    Code:
    <html>
      <head>
        <script type="text/javascript">
    
    function TOGGLE(THS,TGL) {
      var td_nodes = document.getElementsByTagName("TD");
    
      for (var i = 0; i < td_nodes.length; i++) {
        if (td_nodes[i].getAttribute("NAME") == TGL) {
          if (THS.checked==1) {
            td_nodes[i].style.display='';
          } else {
            td_nodes[i].style.display='none';
          }
        }
      }
    }
          
        </script>
      </head>
      <body>
        <INPUT TYPE="checkbox" CHECKED="checked" ONCLICK="TOGGLE(this,'NEWS_GENERAL')">General News <br />
        <INPUT TYPE="checkbox" CHECKED="checked" ONCLICK="TOGGLE(this,'NEWS_REALEASE')">New Realeases <br />
        <INPUT TYPE="checkbox" CHECKED="checked" ONCLICK="TOGGLE(this,'NEWS_BLOG')">Blog <br />
    
        <TABLE>
           <TR><TD NAME="NEWS_BLOG" NAME="NEWS_BLOG">Blog post</TD></TR>
           <TR><TD NAME="NEWS_REALEASE">Realease!</TD></TR>
           <TR><TD NAME="NEWS_GENERAL">General News #2</TD></TR>
           <TR><TD NAME="NEWS_GENERAL">General News #1</TD></TR>
        </TABLE>
      </body>
    </html>

  • #7
    DtD
    DtD is offline
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks alot! Works perfectly

    ~DtD


  •  

    Posting Permissions

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