How to affect a page element

[Keltoi]

very simple, but it's iluding me at the moment:

If I want to affect the background color of a table by changing the hex value in a text field. What is the best way of going about it?

This is what I've tried so far but it's throwing errors:

<input name="FormatHeaderOuterBorderColor" type="text" class="search" id="FormatHeaderOuterBorderColor" value="#FF0000" size="10" onpropertychange="document.form1.fhobc.bgcolor= document.form1.FormatHeaderOuterBorderColor.value">

and

<input name="FormatHeaderOuterBorderColor" type="text" class="search" id="FormatHeaderOuterBorderColor" value="#FF0000" size="10" onpropertychange="document.form1.fhobc.style.backgroundColor = document.form1.FormatHeaderOuterBorderColor.value">

I've also tried several varients.

Anyone know where I'm going wrong?

Many thanks

Keltoi

[Keltoi]

Well unless someone has come up with a better solution, This seems to work:<input name="FormatHeaderOuterBorderColor" type="text" class="search" id="FormatHeaderOuterBorderColor" value="#FF0000" size="10" onpropertychange="document.all.fhobc.style.backgroundColor = document.form1.FormatHeaderOuterBorderColor.value">
Basically instead of:

document.form1.fhobc.style.backgroundColor = document.form1.FormatHeaderOuterBorderColor.value

I've done this:

document.all.fhobc.style.backgroundColor = document.form1.FormatHeaderOuterBorderColor.value

Not sure why one works and not the other but there you go...

[Dean]

Hi Keltoi

I hope this is what you are looking for this allows you to change the background colour and the text coulour using two simple drop down menus that you can change the colours by simply altering the code. it is nice and simple.

I have put a simple page on the bottom to show it in action.

<form>
<div align="left"></div>
<div align="left"><font size="2">text
<select size="1" name="clr" style="background-color: #000000; color: #ffffff" onChange="document.body.text=this.options[this.selectedIndex].value">
<option value="#000000">black
<option value="#a0a078">khaki
<option value="#ffffff">white
<option value="#bcbcbc">l gray
<option value="#ff0000">red
<option value="#5b5b5b">d gray
</select>
background
<select size="1" name="select" style="background-color: #000000; color: #ffffff" onChange="document.bgColor=this.options[this.selectedIndex].value">
<option value="#ffffff">white
<option value="#000000">black
<option value="#a0a078">khaki
<option value="#bcbcbc">l gray
<option value="#ff0000">red
<option value="#5b5b5b">d gray
</select>
</font></div>
<font size="2"></font>
</form>

Have fun:thumbsup:

[Dean]

Hi there again sorry i forgot to chagne the file to a .txt so it didn't take it. here it is once you have it downloaded simply change the .txt to .htm then double click it ok.:thumbsup: :thumbsup:

[Mr J]

Does this help


<script>
function newcol(){
document.all["qw"].bgColor=document.f1.t1.value
}
</script>

<form name="f1">
<input type="text" name="t1" value="#FF0000" onblur="newcol()">
</form>

<table border=1 id="qw">
<tr>
<td>
Change the colour of this table background when textbox goes onblur
</td></tr></table>

[Keltoi]

Thanks Dean and Mr J,

Dean, nice idea but I'm using a color chart as the primary method of choosing colors, so your method doesn't quite suite. Though Mr J's is ideal... Thanks :thumbsup:
The whole thing a lot more useable...

Thanks a lot guys :D