...

View Full Version : If i wish to affect a single table cell, i could use the getElementById() method?



SpiritualStorms
06-29-2004, 06:00 PM
I have a table that i use for formating basically. This being the case, i was wondering if the ideal manner for the targetting of this cell would be the getElementById method. Is this correct? The reason for this, is that i want to give a visitor the option of changing the cell collor by choosing an option from a drop down list. I know how to use a drop down list, but i need to know if what i have suggested would be the correct method of doing so.

Thank you.

trib4lmaniac
06-29-2004, 07:10 PM
I'd probably use getElementById for that sort of thing, can't think of anything better!

SpiritualStorms
06-30-2004, 11:26 AM
I thought the getElementById() method would work, but from the reality of the script below, that doesnt seem to be the case:



var mainCell=document.getElementById("MainCell");

function changeTableColor(obj)
{

if(obj)
{
theLink = obj.selectedIndex;

mainCell.bgcolor=obj.options[theLink].value;
}
}


Here, i am using what is called intuition to produce my code, but it doesnt look like my instincts are on the bulls' eye.

Before, i go, here's my table code:



<dir align="center">
<table
bgcolor="lightyellow"
width="86%"
id="mainCell">
<tr>

<td>


<div align="right">

<form name="b1">

<select name = "b2" size = "1">

<option selected value="lightyellow"> Color_01 </option>

<option value="red"> Color_02</option>

<option value="blue"> Color_03 </option>

<option value="green"> Color_04 </option>

<option value="orange"> Color_05 </option>

<option value="gray"> Color_06 </option>

<option value="brown"> Color_07 </option>

<option value="olive"> Color_08 </option>

<option value="navy"> Color_09 </option>

<option value="plumb"> Color_10 </option>

</select>

<input type="button" value="Go"
onClick="changeTableColor(document.b1.b2);">

</form>
</div>


I guess i should point that the id of the Table is applied to the Table tag itself, and not to any of the table cell tags. Since, i can control the color of the table with the main Table tag, i didnt see a point in adding an id to an actual cell.

At any rate, i want to change the bgcolor of the Table through a drop down-list.

glenngv
06-30-2004, 12:32 PM
You seem to be calling

var mainCell=document.getElementById("MainCell");

before the table is loaded to the page.

Why not call it directly inside the function?

document.getElementById("MainCell").style.backgroundColor=obj.options[theLink].value;

SpiritualStorms
06-30-2004, 04:42 PM
I do however have a few questions: One, why am i using the style property in the path? Two, why am i using the background property, as opposed to the bgcolor property?

Spudhead
06-30-2004, 05:59 PM
If you mean why has glenngv put "style.backgroundColor" - that's the correct way in the DOM to reference properties that are usually declared in CSS: CSS defines the style, so it makes sense that the background color should be accessed via the style "bit" of the object's model. Apologies if I've misinterpreted your question.

Second question - the bgcolor property is a HTML attribute, and not part of this CSS/DOM thing. Technically, you shouldn't be using it. You should set the background color either via a stylesheet (in the HTML head or in an external CSS file), or in the table itself:

<table style="background-color:red;">

What makes it even more fun is that the "background-color" CSS property is accessed via javascript/DOM through the property "backgroundColor" - something about javascript not liking hyphens, or something. As a rule of thumb, though: if your CSS property is two hyphenated words, get the javascript property by taking out the hyphen and capitalising the initial letter of the second word.

Anyway - I've played around a bit and redid your function. Hope you don't mind :)



<html>
<head>
<title>Clicky Clicky Changee Color</title>

<script language="JavaScript">
function changeObjectColor(theObjectToChange,theColorToChangeItTo){
if(theColorToChangeItTo!=""){
document.getElementById(theObjectToChange).style.backgroundColor=theColorToChangeItTo;
}
}
</script>

</head>

<body>

<form name="b1">

<table id="mainCell" cellpadding=0 cellspacing=0 border=0 bgcolor="red">
<tr>
<td><select name = "b2" size = "1">
<option selected value="lightyellow"> Color_01 </option>
<option value="red"> Color_02</option>
<option value="blue"> Color_03 </option>
<option value="green"> Color_04 </option>
<option value="orange"> Color_05 </option>
<option value="gray"> Color_06 </option>
<option value="brown"> Color_07 </option>
<option value="olive"> Color_08 </option>
<option value="navy"> Color_09 </option>
<option value="plumb"> Color_10 </option>
</select>
<br><br>
<input type="button" value="Change" onClick="changeObjectColor('maincell',document.b1.b2.options[document.b1.b2.selectedIndex].value);"></td>
</tr>
</table>

<br><br>

<table id="mainCell2" cellpadding=0 cellspacing=0 border=0 bgcolor="red">
<tr>
<td><select name = "b3" size = "1">
<option selected value="lightyellow"> Color_01 </option>
<option value="red"> Color_02</option>
<option value="blue"> Color_03 </option>
<option value="green"> Color_04 </option>
<option value="orange"> Color_05 </option>
<option value="gray"> Color_06 </option>
<option value="brown"> Color_07 </option>
<option value="olive"> Color_08 </option>
<option value="navy"> Color_09 </option>
<option value="plumb"> Color_10 </option>
</select>
<br><br>
<input type="button" value="Change" onClick="changeObjectColor('maincell2',document.b1.b3.options[document.b1.b3.selectedIndex].value);"></td>
</tr>
</table>
</form>
</body>
</html>

SpiritualStorms
06-30-2004, 06:43 PM
I know the style property refers to style sheets, hence, why i didnt understand why it was included in glens example, since i was not using style sheet definitions.


If you mean why has glenngv put "style.backgroundColor" - that's the correct way in the DOM to reference properties that are usually declared in CSS: CSS defines the style, so it makes sense that the background color should be accessed via the style "bit" of the object's model. Apologies if I've misinterpreted your question.

Second question - the bgcolor property is a HTML attribute, and not part of this CSS/DOM thing. Technically, you shouldn't be using it. You should set the background color either via a stylesheet (in the HTML head or in an external CSS file), or in the table itself:

<table style="background-color:red;">


Having said the former, does this mean there's no way of affecting a Table coded in HTML alone, and not in CSS?

Roy Sinclair
06-30-2004, 11:19 PM
I know the style property refers to style sheets, hence, why i didnt understand why it was included in glens example, since i was not using style sheet definitions.

The deprecated styling html is translated to styles internally in the browser whether you used them or not so using the proper DOM methods to access them will make your script more portable and give it a better "shelf life" (IE: you won't have to rush back and fix it because browser X suddenly became the "must have" program for internet access but browser X doesn't support that particular older construct).

SpiritualStorms
07-01-2004, 05:36 AM
....so because of the deprecation, styles technically the only real way to go?

SpiritualStorms
07-01-2004, 06:03 AM
I tried what was suggested, and after a while of tweaking around, i modified the code to suit my taste, anf wola, the friggin script worked. Here:


function changeTableColor(target, obj)
{

var mainCell=document.getElementById(target).style;

if( obj )
{
theLink = obj.selectedIndex;

mainCell.backgroundColor=obj.options[theLink].value;
}

}

Cute little sucker, eh? But she works beautifully.

And for the calling of the function, this is what i had to do:


<input type="button" value="Go"
onClick="changeTableColor('MainCell',document.b1.b2);">


Not a bad little fish, is she?

At any rate, i still dont get why i had to enclose the getElementById() method inside the actual function itself, rather than using it on a global variable. This is all the more true, considering the fact, that i had to pass the id value to the parameter of the function. Makes no sense really. Seems like i could just do away with the method, and just pass the value to through the functions parameter. I some times wonder if i will ever understand the logic of this language.

glenngv
07-01-2004, 06:39 AM
If you want it to be a global variable...


function changeTableColor(target, obj)
{
if( obj )
{
theLink = obj.selectedIndex;
mainCell.style.backgroundColor=obj.options[theLink].value;
}
}

var mainCell;
function init(){
mainCell = document.getElementById('MainCell');
}
...
<input type="button" value="Go"
onClick="changeTableColor(this.form.b2);">

Notice the use of this.form object property to refer to the form.
Every HTML control such as inputs, selects, textareas and the like has the form property that refers the form it belongs to. The this keyword there refers to the current element which is the input button.

The advantage of using that is you don't rely on the form name. If the form name changes, you don't need to change the code.

SpiritualStorms
07-01-2004, 01:39 PM
In post 4, you said that i should be calling my getElementById() method from with-in the function, instead of as a regular global variable. Why say that, if in your last post, you want me to have a global variable?

glenngv
07-01-2004, 01:57 PM
At any rate, i still dont get why i had to enclose the getElementById() method inside the actual function itself, rather than using it on a global variable. This is all the more true, considering the fact, that i had to pass the id value to the parameter of the function. Makes no sense really. Seems like i could just do away with the method, and just pass the value to through the functions parameter. I some times wonder if i will ever understand the logic of this language.
What does this mean?
I'm not telling you to use a global variable. I'm not recommending it either. I'm just showing you how to do it properly in case you want to do it that way.

SpiritualStorms
07-01-2004, 02:05 PM
From the looks of the following, there is really no need it seems for me to use the getElementById() method:



function changeTableColor(target, obj)
{

var mainCell=document.getElementById(target).style;

if( obj )
{
theLink = obj.selectedIndex;

mainCell.backgroundColor=obj.options[theLink].value;
}

}

It seems like i could just as easily have done the following:


function changeTableColor(target, obj)
{

var mainCell=target

if( obj )
{
theLink = obj.selectedIndex;

mainCell.backgroundColor=obj.options[theLink].value;
}

}

Remember, that i had once declared a variable outside a function, and that was supposed to represent the result of my getElementById() method. You however suggested, i should declare inside the function, which didnt make much sense, sense in my function i had a paramter called target that was equally passed to getElementById() method. In other words, this part seems silly:



function changeTableColor(target, obj)
{

var mainCell=document.getElementById(target).style;


The above makes no sense really, since i could just as well have done this,



function changeTableColor(target, obj)
{

var mainCell=target;


What am i failing to understand?

glenngv
07-01-2004, 02:20 PM
You really need to use getElementById because you're passing just the id of the table and NOT the object reference to it

<input type="button" value="Go"
onClick="changeTableColor('MainCell',document.b1.b2);">

But if you are passing the object reference like this:

<input type="button" value="Go"
onClick="changeTableColor(document.getElementById('MainCell'),document.b1.b2);">

you don't need this line in the function:

var mainCell=target

because you can use the target parameter directly:

target.style.backgroundColor=obj.options[theLink].value;

Roy Sinclair
07-01-2004, 07:18 PM
....so because of the deprecation, styles technically the only real way to go?

Definitely. It's to your advantage to learn to use styles, it's very easy to replace the deprecated stuff already with simple styles.

SpiritualStorms
07-01-2004, 09:40 PM
I have no idea what to think actually. Here:



You really need to use getElementById because you're passing just the id of the table and NOT the object reference to it

<input type="button" value="Go"
onClick="changeTableColor('MainCell',document.b1.b2);">

But if you are passing the object reference like this:

<input type="button" value="Go"
onClick="changeTableColor(document.getElementById('MainCell'),document.b1.b2);">


So if there's a difference between an object reference, and just passing the id, then why would an image flip function work?

I think i posted the following in another thread:


function imageFlips(paramOne,paramTwo)
{
if(document.images)
{
document.images[paramOne].src=paramTwo;
}
else
{
alert("There's no image by the name of " + paramOne);
}
}


And to call it, this is what i had used:



<a href="javascript:void(0);" onmouseover="imageFlips('flower','triangle.bmp');"
onmouseout="imageFlips('flower','flower.bmp');">
<img id="flower" src="flower.bmp">
</a>


So why would the above work but not my other function? What's the difference? In other words, i am altering the value of a particular property of a particular tag in one example without the getElementById() method, but in another example, i have to use the getElementById() method. Help.

glenngv
07-02-2004, 06:58 AM
For <img> tag, there is an image collection (document.images) that allows to reference a specific image using the specified name, id or index (zero-based location of image in the collection).

Let's say that the first image in a document looks like this:

<img name="myname" id="myid" src="myimage.gif" />

The image can be referenced in any of the following ways:

document.images[0]
document.images['myname']
document.images['myid']
document.getElementById('myid')


That's the reason why your flip function works.

SpiritualStorms
07-03-2004, 05:20 AM
Why did you say the below,



You seem to be calling

var mainCell=document.getElementById("MainCell");

before the table is loaded to the page.

Why not call it directly inside the function?

document.getElementById("MainCell").style.backgroundColor=obj.options[theLink].value;


When, you gave me the other script?

SpiritualStorms
07-03-2004, 09:28 AM
Ok, what you said in post 4, is a bit different from what you said in post 11. It seems like you are saying the opposite. My main thing was as to why the getElementById() method did not work when it was outside the function, and why it did work, when it was inside the function. I dont know what difference it would have made really. Well, i have an idea as to why it might not have worked, but i want to know what yu have to say.

Basscyst
07-04-2004, 05:59 PM
Hello,

It won't work outside the function because anything outside of a function is executed prior to the loading of the <body>. Since the body has not yet loaded, the referenced form element does not yet exist. Does that make sense? In post 11 he merly gave an example of how to make the variable global if that was your intention, being that your former code had it as such. You can declare a global variable from within a function by eliminating the var prior to the declaration of the variable or do as Glenngv did and declare the variable outside the function and then add the value to it within the function I think the latter is the better practice.

Basscyst

glenngv
07-05-2004, 02:58 AM
What Basscyst said.

SpiritualStorms, hope you're now enlightened.

SpiritualStorms
07-05-2004, 11:52 AM
so in a way, it would be like the alert method when it is not contained within a function: it will be executed prior to the page being completely loaded.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum