Javascript style using variables..

Dev Articles Community Forums Sponsor:

November 12th, 2002, 05:54 PM

fakker

The calm b4 the storm

Join Date: Jul 2002

Location: Manchester, UK

Posts: 404

Time spent in forums: < 1 sec
Reputation Power: 7

Javascript style using variables..

hi,

I have the following Javascript function:

Code:

function change(toStatus,row)
{
  if (toStatus == 'ON') 
  {
   row.style.backgroundColor = "#D7FFD2";
  }
  
  if (toStatus == 'OFF') 
  {
   row.style.backgroundColor = "#E1E1E1";	
  }

I call the funtion using radio buttons... so in row1, the radio button would look like:

<input type=radio name=anything value=ON checked onClick="change('ON','$row');">

so.... when the user clicks the radio button it calls "change" and passed the $row number (this is generated in PHP and all works ok..)

all I need to know is... in the JS function, how can I tell it that ROW is a variable.. at the moment, the bit of code "row.style.backgroundColor" is looking for the row with the ID "row" when it should be looking for the row with the ID passed in the function variable....

eg: in PHP youd use $row.style...... is there something similar in JS???

Cheers.

__________________
Matt 'Fakker' Facer

mattfacer.com

November 12th, 2002, 06:55 PM

Nigorr

Contributing User

Join Date: Apr 2002

Location: Brisbane, Australia

Posts: 78

Time spent in forums: < 1 sec
Reputation Power: 7

Hi, could you give me the whole html page, then I can help you, I have done this before but can't find it.

by giving me the whole html page saves me time try to make one up

November 12th, 2002, 07:09 PM

fakker

The calm b4 the storm

Join Date: Jul 2002

Location: Manchester, UK

Posts: 404

Time spent in forums: < 1 sec
Reputation Power: 7

sure...here u go.....

Code:

<html>
<head>
<script language="JavaScript">


function change(toStatus,row)
{
  
  if (toStatus == 'ON') 
  {
    row.style.backgroundColor = "#D7FFD2";
  }
  
  if (toStatus == 'OFF') 
  {
   row.style.backgroundColor = "#E1E1E1";
  }

}

</script>



</head>

<body>

<form action="update.php" method="post" name="form">
<input type="hidden" name="todo" value="update">
<table width="500" border="0" align="center" cellpadding="2" cellspacing="0">
  <tr> 
    <td width="176" class="table_head"><strong>Button Name</strong></td>
    <td width="162" class="table_head"> 
      <div align="center"><strong>ON</strong></div></td>
    <td width="162" class="table_head"> 
      <div align="center"><strong>OFF</strong></div></td>
  </tr>
<tr bgcolor="#E1E1E1" id="a">
<td class="table_row">button_name1</td>
<td class="table_row"><div align="center">
<input type="radio" name="button_name1" value="ON" onClick="change('ON','a');">
</div></td>
<td class="table_row"><div align="center">
<input type="radio" name="button_name1" value="OFF" checked onClick="change('OFF','a');">
</div></td>
</tr>

<tr bgcolor="#E1E1E1" id="b">
<td class="table_row">button_name2</td>
<td class="table_row"><div align="center">
<input type="radio" name="button_name2" value="ON" onClick="change('ON','b');">
</div></td>
<td class="table_row"><div align="center">
<input type="radio" name="button_name2" value="OFF" checked onClick="change('OFF','b');">
</div></td>
</tr>


</table>
<p align="center">
  <input name="Submit" type="submit" class="textbox" value="<<<< UPDATE BUTTONS >>>>">
</p></form>
</body>
</html>

November 12th, 2002, 07:15 PM

fakker

The calm b4 the storm

Join Date: Jul 2002

Location: Manchester, UK

Posts: 404

Time spent in forums: < 1 sec
Reputation Power: 7

so if the value of "row" is passed on as "a" ... the code in the JS function should work like:

a.style.backgroundColor = "#D7FFD2";

that works... when you actually put "a.style" but when you want to use the value from the function "function(toStatus,row)" it doesnt......

each row has an "id=a" tag..... so the first on is "id=a" then the next rown in the table is "id=b" etc etc....... that way the style change only affects the desired row...

November 12th, 2002, 07:50 PM

Nigorr

Contributing User

Join Date: Apr 2002

Location: Brisbane, Australia

Posts: 78

Time spent in forums: < 1 sec
Reputation Power: 7

here is the working version

Code:

<html>
  <head>
    <script language="JavaScript">
      function change(toStatus,row) {
        if (toStatus == 'ON') {
          eval(row + ".style.backgroundColor = \"#D7FFD2\"");
        }
 
        if (toStatus == 'OFF') {
          eval(row + ".style.backgroundColor = \"#E1E1E1\"");
        }

      }
    </script>
  </head>

  <body>
    <form action="update.php" method="post" name="form">
      <input type="hidden" name="todo" value="update">
      <table width="500" border="0" align="center" cellpadding="2" cellspacing="0">
        <tr> 
          <td width="176" class="table_head"><strong>Button Name</strong></td>
          <td width="162" class="table_head"> 
            <div align="center"><strong>ON</strong></div>
          </td>
          <td width="162" class="table_head"> 
            <div align="center"><strong>OFF</strong></div>
          </td>
        </tr>
        <tr bgcolor="#E1E1E1" id="a">
          <td class="table_row">button_name1</td>
          <td class="table_row">
            <div align="center">
              <input type="radio" name="button_name1" value="ON" onClick="change('ON','a');">
            </div>
          </td>
          <td class="table_row">
            <div align="center">
              <input type="radio" name="button_name1" value="OFF" checked onClick="change('OFF','a');">
            </div>
          </td>
        </tr>
        <tr bgcolor="#E1E1E1" id="b">
          <td class="table_row">button_name2</td>
          <td class="table_row">
            <div align="center">
              <input type="radio" name="button_name2" value="ON" onClick="change('ON','b');">
            </div>
          </td>
          <td class="table_row">
            <div align="center">
              <input type="radio" name="button_name2" value="OFF" checked onClick="change('OFF','b');">
            </div>
          </td>
        </tr>
      </table>

      <p align="center">
         <input name="Submit" type="submit" class="textbox" value="<<<< UPDATE BUTTONS >>>>">
      </p>
    </form>
  </body>
</html>

Any questions or does this make sense?

November 12th, 2002, 07:56 PM

fakker

The calm b4 the storm

Join Date: Jul 2002

Location: Manchester, UK

Posts: 404

Time spent in forums: < 1 sec
Reputation Power: 7

aaaah mate, you are a star!!!

it works perfectly!!!

thanks v much!!

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: