Change row background color based on value in textfield

E

eawade

New Member
Hey Guys,

I am frustrated with this matter and therefore need some help. I will try to keep this as simple as possible. I really need some help performing something that should be relatively simple in Javascript. I have a form which contains FOUR text fields (e.g. TEXTFIELD1, TEXTFIELD2, TEXTFIELD3 & TEXTFIELD4). Each text field holds a HEX,DEC color value. ABOVE this form I have a table with TWO ROWS (ROW1 and ROW2). ROW1 should correspond with TEXTFIELD1, so that when the VALUE in TEXTFEILD1 is changed the background color of ROW1 will change to match the HEX,DEC VALUE entered in TEXTFIELD1. The same would happen with TEXTFIELD2 and ROW2. TEXTFIELD3 should be used to change the color of the TEXT inside ROW1 and TEXTFIELD4 should change the color of the TEXT in ROW2. I also wanted to know if it would be possible to achieve this without clicking any button. If doing this without clicking a button is overly complicated, i havinga button is not a problem.

------------------------------------------------------------------
| ROW1 | TEXT IN ROW 1
------------------------------------------------------------------
| ROW2 | TEXT IN ROW 2
------------------------------------------------------------------

TEXTFIELD1 <----HEXDEC VALUE GOES HERE to change color of ROW1---->
TEXTFIELD2 <----HEXDEC VALUE GOES HERE to change color of ROW2---->
TEXTFIELD3 <----HEXDEC VALUE GOES HERE to change color of TEXT IN ROW1---->
TEXTFIELD4 <----HEXDEC VALUE GOES HERE to change color of TEXT in ROW2---->

Hope this makes sense.

Thanks,
E.A.
 
E

Erik

New Member
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Colors via Javascript</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type="text/javascript">
      function updateRows()
      {
        var r1_bg_color = document.getElementById('textfield1').value;
        var r2_bg_color = document.getElementById('textfield2').value;
        var r1_text_color = document.getElementById('textfield3').value;
        var r2_text_color = document.getElementById('textfield4').value;

        var row1 = document.getElementById('row1');
        var row2 = document.getElementById('row2');

        row1.style.backgroundColor = '#'+r1_bg_color;
        row2.style.backgroundColor = '#'+r2_bg_color;
        row1.style.color = '#'+r1_text_color;
        row2.style.color = '#'+r2_text_color;
      }
    </script>
  </head>
  <body>
    <span id="row1">Hello from row 1</span><br />
    <span id="row2">Hello from row 2</span><br />
    <br />
    <form action="">
      Background Color Row 1<input type="text" id="textfield1" onkeyup="javascript:updateRows();"/><br />
      Background Color Row 2<input type="text" id="textfield2" onkeyup="javascript:updateRows();"/><br />
      Text Color Row 1<input type="text" id="textfield3" onkeyup="javascript:updateRows();"/><br />
      Text Color Row 2<input type="text" id="textfield4" onkeyup="javascript:updateRows();"/><br />
    </form>
  </body>
</html>

-Erik
 
You must log in or register to reply here.
Top