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

Nov 11th, 2006, 08: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.


Nov 11th, 2006, 08: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.

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


Nov 11th, 2006, 10: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.

Nov 11th, 2006, 10: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 :)

Nov 11th, 2006, 10: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>

Nov 11th, 2006, 10:52 PM
Thanks alot! Works perfectly