By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,818 Members | 2,089 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,818 IT Pros & Developers. It's quick & easy.

using the DOM to change the CLASS attribute

P: n/a
hello. i have a <tablewith each cell having its own unique ID (see
below). What i want to do is change the CLASS attribute for the SPAN
in one of the cells. i'm currently testing this in IE 6. In my
javascript, i wrote

document.getElementById('0_1').getElementsByTagNam e("span")[0].setAttribute("className",
"hasEvents");

However, i get the following error message:

'document.getElementById(...).getElementsByTagName (...).0' is null or
not an object.

Can someone please help? thanks

HTML code:

<table>
<tr>
<td id="0_0"><span class="noEvents">1</span></td>
<td id="0_1"><span class="noEvents">2</span></td>
<td id="0_2"><span class="noEvents">3</span></td>
</tr>
</table>

Sep 21 '06 #1
Share this Question
Share on Google+
6 Replies


P: n/a
document.getElementById('YO').getElementsByTagName ("span")[0].className
= "hasEvents";
silly putty wrote:
hello. i have a <tablewith each cell having its own unique ID (see
below). What i want to do is change the CLASS attribute for the SPAN
in one of the cells. i'm currently testing this in IE 6. In my
javascript, i wrote

document.getElementById('0_1').getElementsByTagNam e("span")[0].setAttribute("className",
"hasEvents");

However, i get the following error message:

'document.getElementById(...).getElementsByTagName (...).0' is null or
not an object.

Can someone please help? thanks

HTML code:

<table>
<tr>
<td id="0_0"><span class="noEvents">1</span></td>
<td id="0_1"><span class="noEvents">2</span></td>
<td id="0_2"><span class="noEvents">3</span></td>
</tr>
</table>
Sep 21 '06 #2

P: n/a
didn't work

ni*********@gmail.com wrote:
document.getElementById('YO').getElementsByTagName ("span")[0].className
= "hasEvents";
silly putty wrote:
hello. i have a <tablewith each cell having its own unique ID (see
below). What i want to do is change the CLASS attribute for the SPAN
in one of the cells. i'm currently testing this in IE 6. In my
javascript, i wrote

document.getElementById('0_1').getElementsByTagNam e("span")[0].setAttribute("className",
"hasEvents");

However, i get the following error message:

'document.getElementById(...).getElementsByTagName (...).0' is null or
not an object.

Can someone please help? thanks

HTML code:

<table>
<tr>
<td id="0_0"><span class="noEvents">1</span></td>
<td id="0_1"><span class="noEvents">2</span></td>
<td id="0_2"><span class="noEvents">3</span></td>
</tr>
</table>
Sep 21 '06 #3

P: n/a
did you change the id of the TD to "YO"

silly putty wrote:
didn't work

ni*********@gmail.com wrote:
document.getElementById('YO').getElementsByTagName ("span")[0].className
= "hasEvents";
silly putty wrote:
hello. i have a <tablewith each cell having its own unique ID (see
below). What i want to do is change the CLASS attribute for the SPAN
in one of the cells. i'm currently testing this in IE 6. In my
javascript, i wrote
>
document.getElementById('0_1').getElementsByTagNam e("span")[0].setAttribute("className",
"hasEvents");
>
However, i get the following error message:
>
'document.getElementById(...).getElementsByTagName (...).0' is null or
not an object.
>
Can someone please help? thanks
>
HTML code:
>
<table>
<tr>
<td id="0_0"><span class="noEvents">1</span></td>
<td id="0_1"><span class="noEvents">2</span></td>
<td id="0_2"><span class="noEvents">3</span></td>
</tr>
</table>
Sep 21 '06 #4

P: n/a
silly putty wrote:
didn't work
Could you be any more vague?
>>document.getElementById('0_1').getElementsByTagN ame("span")[0].setAttribute("className",
"hasEvents");
An ID attribute value cannot start with a digit. Your ID is invalid, so
results of the getElementById() call are unpredictable.

One way of debugging your own problem is to do an alert at each stage to see
where your problem is happening:

alert(document.getElementById('0_1'));
alert(document.getElementById('0_1').getElementsBy TagName("span"));
alert(document.getElementById('0_1').getElementsBy TagName("span")[0]);

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Sep 21 '06 #5

P: n/a
Matt was right in that the ID can't begin with a digit. Thanks Matt
for figuring out the problem.

Just curious, ni*********@gmail.com suggested that I change the ID to
Y0. what does Y0 mean? Thanks
Matt Kruse wrote:
silly putty wrote:
didn't work

Could you be any more vague?
>document.getElementById('0_1').getElementsByTagNa me("span")[0].setAttribute("className",
"hasEvents");

An ID attribute value cannot start with a digit. Your ID is invalid, so
results of the getElementById() call are unpredictable.

One way of debugging your own problem is to do an alert at each stage to see
where your problem is happening:

alert(document.getElementById('0_1'));
alert(document.getElementById('0_1').getElementsBy TagName("span"));
alert(document.getElementById('0_1').getElementsBy TagName("span")[0]);

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Sep 21 '06 #6

P: n/a
silly putty wrote:
Matt was right in that the ID can't begin with a digit. Thanks Matt
for figuring out the problem.
Please don't top-post here, reply below a trimmed quote of whatever you
are replying to.
>
Just curious, ni*********@gmail.com suggested that I change the ID to
Y0. what does Y0 mean?
Nothing, it just means your ID doesn't start with a digit.

Incidentally, since you are looking for spans within the table, have
you consdered using an ID on the table and just getting all the spans
once? If you base the function on just getting an element reference,
you can re-use the code for any kind of element.

e.g.

<table id="theTable">
<tr>
<td><span class="noEvents">...</span>.
<td><span class="hasEvents">...</span>
<td><span class="noEvents">...</span>
</tr>
</table>

<script type="text/javascript">
function doSpanStuff(el){
var allSpans = el.getElementsByTagName('span');
var i = allSpans.length;
var aSpan;
while (i--){
aSpan = allSpans[i];
if ('hasEvents' == aSpan.className){
/* do stuff */
}
}
}

doSpanStuff(document.getElementById('theTable'));

</script>
--
Rob

Sep 22 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.