Welcome to WebmasterWorld Guest from 174.129.135.89

Forum Moderators: open

Message Too Old, No Replies

Javascript to update a cell and a text box

   
4:22 pm on Aug 26, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Can anyone tell me the javascript code to update a cell and a text box when a gif is clicked ie:

I have a table with 3 cells, each cell has a background colour, say #006699, #339966, #FF9900. Each cell has a transparent gif to click. Every time one of the gifs is clicked:
- A section of the screen (a cell or div) changes its background colour to the colour of the cell of the clicked gif.
- and the hex value for the color is writen into a text box.

5:50 pm on Aug 26, 2002 (gmt 0)

10+ Year Member



This is rather simple using standard DOM:

function changeBgr(element, color) {
document.getElementById(element).style.backgroundColor = color;
document.form1.field1.value = color;
}

The cell (or div) you're changing should have the ID set:
<td id="first"> or <div id="second">,

and the text field is named "field1" and placed inside form1:

<form name="form1">
<input type="text" name="field1">
</form>

The function should be called like this:

<a href="#" onclick="changeBgr('first', '#339966')" title="click to change backgr color"><img src="transp.gif" width=... height=... border="0"></a>

6:04 pm on Aug 26, 2002 (gmt 0)

10+ Year Member



Change it to:

<a href="javascript:changeBgr('first', '#339966');"><img....

That way, you don't break the back button or have the document jump around.

6:56 pm on Aug 26, 2002 (gmt 0)

10+ Year Member



I forgot about page jumping up. It happens only in IE by the way. There's a fix for this:

<a href="javascript:changeBgr('first', '#339966'); return false">

9:17 am on Aug 27, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thankyou Starway!
It will be a few days before I can try this.