Textfield Colour Changer

[dalar]

Hi,
Bit confused on the code for this...

I am working on a application where I have a table with one cell (1X1) -

Next to the table I have 1 Textfield... I wish to allow the user to enter a #hex code into the textfield, so the data input example would be:

INPUT: #cccccc

Once he/she has inserted this code into the textfield - I would like the background colour of the table to change to match this color - in other words the user is defining the background colour of the cell as the change the value of the textfield..

 

[theboyhope]

Something like the below, which you would pass the id of the table and this.value from the text input, probably from the onchange event.

function changeBackgroundColor( objStr, newColor ) {

  obj = document.getElementById( objStr );
  obj.style.backgroundColor = newColor;
}

I'd recommend validating the new colour value btw.

HTH.

 

[cLFlaVA]

Two things to add to theboyhope's code:

[ol]
[li]getElementById does not work in all browsers. I recommend replacing that line with this: [tt]obj = document.form_name.elements['textbox_name'];[/tt][/li]
[li]In some browsers, you cannot set the style properties of an object unless the style is already set. So, in your textbox tag, put something like: [tt]<input type="text" name="texbox_name" style="background-color: #ffffff;">[/tt][/li]
[/ol]

Hope that helps.

*cLFlaVA
----------------------------
When will I be able to see what other members can see about myself? It's been like, a freakin' month already!

 

[theboyhope]

NS4 had an elements array? Good thinking in that case.

Is point two for NS4, too? I haven't heard of that one.

 

[cLFlaVA]

To be honest, I'm not sure which browser, but I do remember coming across this problem at one point.

Yet another way to reference the form's text object would be by name: [tt]obj = document.form_name.textbox_name;[/tt]

*cLFlaVA
----------------------------
When will I be able to see what other members can see about myself? It's been like, a freakin' month already!

 

[theboyhope]

Hmmm ... give us a shout if you remember which browser will ya.