Forum Moderators: open
I will try to keep this as simple as possible. I really need some help performing a relatively simple Javascript function. I have a form which contains two text fields (e.g. TEXTFIELD1 and TEXTFIELD2). Each text field holds a HEX,DEC color value. ABOVE this form I have a table with TWO ROWS. ROW1 should correspond with TEXTFIELD1, so that when the VALUE in TEXTFEILD1 is change the background color of ROW1 will change to match the HEX,DEC VALUE entered in TEXTFIELD1. The same would happen with TEXTFIELD2 and ROW2. I also wanted to know if it would be possible to achieve this without clicking any button. Basically once the value is input in the field the background of the corresponding row changes.
------------------------------------------------------------------
¦ ROW1 ¦
------------------------------------------------------------------
¦ ROW2 ¦
------------------------------------------------------------------
TEXTFIELD1 <----HEXDEC VALUE GOES HERE to change color of ROW1---->
TEXTFIELD2 <----HEXDEC VALUE GOES HERE to change color of ROW2---->
I apologize if I have written too much guys. Any help would be greatly appreciated.
Thanks,
E.A.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
</head>
<body>
<div>
<table id='myTable'>
<tbody>
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
</tbody>
</table>
<form action="">
<div>
<div><input type="text" id="row1color"></div>
<div><input type="text" id="row2color"></div>
</div>
</form>
</div>
<script type="text/javascript">
window.onload = function () {
// Attach event handler
var r1input = document.getElementById('row1color'),
r2input = document.getElementById('row2color'),
tbody = document.getElementById('myTable').getElementsByTagName('tbody')[0];
r1input.onchange = function () {
tbody.getElementsByTagName('tr')[0].style.backgroundColor = r1input.value;
}
r2input.onchange = function() {
tbody.getElementsByTagName('tr')[1].style.backgroundColor = r2input.value;
}
};
</script>
</body>
</html>
I wanted to say thankyou for the code. It was a big help.
Thanks
Ethan-Anthony
