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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

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

  • #2
    Regular Coder trib4lmaniac's Avatar
    Join Date
    Feb 2004
    Location
    Cornwall, UK
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd probably use getElementById for that sort of thing, can't think of anything better!

  • #3
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I tried what i thought was true, but no green lights.

    I thought the getElementById() method would work, but from the reality of the script below, that doesnt seem to be the case:

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

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

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,946
    Thanks
    0
    Thanked 236 Times in 233 Posts
    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;

  • #5
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ok, good point, and i will try that.

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

  • #6
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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 :)

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

  • #7
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    That's what i mean

    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?
    Last edited by SpiritualStorms; 06-30-2004 at 05:53 PM.
    LovesWar

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SpiritualStorms
    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).
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #9
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    so i should set some inline styles anyways?

    ....so because of the deprecation, styles technically the only real way to go?
    LovesWar

  • #10
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    It works, oddly enough.

    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:

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

    Code:
    <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.
    LovesWar

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,946
    Thanks
    0
    Thanked 236 Times in 233 Posts
    If you want it to be a global variable...
    Code:
    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.

  • #12
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    arent you contradicting yourself a bit?

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

  • #13
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,946
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by SpiritualStorms
    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.

  • #14
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts

    this is what i mean...........

    From the looks of the following, there is really no need it seems for me to use the getElementById() method:

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

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

    Code:
    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,

    Code:
    function changeTableColor(target, obj)
    {
    
    var mainCell=target;
    What am i failing to understand?
    Last edited by SpiritualStorms; 07-01-2004 at 01:07 PM.
    LovesWar

  • #15
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,946
    Thanks
    0
    Thanked 236 Times in 233 Posts
    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;


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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