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

11-11-2006, 09:25 PM
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:

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:

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)

<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

<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>

If you put that in an HTML file, clicking "General News" throws the error.


11-11-2006, 09:51 PM
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.

11-11-2006, 11:00 PM
Well, is there any way I can still do what I want?


11-11-2006, 11:18 PM
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.

11-11-2006, 11:23 PM
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.

Thanks :)

11-11-2006, 11:35 PM
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.


<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) {
} else {

<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 />

<TR><TD NAME="NEWS_GENERAL">General News #2</TD></TR>
<TR><TD NAME="NEWS_GENERAL">General News #1</TD></TR>

11-11-2006, 11:52 PM
Thanks alot! Works perfectly