controlling button formatting with onClick

**alda.b** · Oct 6, 2002 16:46

I'm working on a navigation bar that uses form buttons (just how it worked out with the content management system). With the onClick event I need to be able to set the button to the "on" css style and at the same time set the other buttons to the "default" css style.

I think I have at least come up with a structure that might work, except for the else statement... don't know what should be there... which might mean I don't need to use a loop? Anyhow, here's the js:

Code:

funtion resetButtons()
  thisClassName="default"

hasForm = false
for (i=0; i<this.form; i++) {
  if (this.form[i].name.indexOf("formName")>=0) {
  hasForm = true
  }
}

if (hasForm) {
  resetButtons
}

else {
  ''
}

In case it helps, here's the html, with only 2 buttons just as a sample:

Code:

<table>
<tr>
 <td>
<form name="psx-catformname">
  <input type="button" class="default" onMouseOut="this.className='mouseout'" onMouseOver="this.className='mouseover'" onClick="resetButtons">
</form>
 </td>
 <td>
<form name="psx-catformname">
  <input type="button" class="default" onMouseOut="this.className='mouseout'" onMouseOver="this.className='mouseover'"  onClick="resetButtons">
</form>
 </td>
</tr>
</table>

**spartan** · Oct 7, 2002 05:15

wipped this up quickly... hope it helps.

Code:

<HTML>
<HEAD>
<TITLE></TITLE>
<style>
.default{
 color: red
}
.on{
color: blue
}
</style>

<script language=javascript>
function change(theclass){
   var el=event.srcElement
   var objButtons = document.getElementsByTagName("input")
   for (var i = 0; i < objButtons.length; i++)
     {
      var theButton = objButtons.item(i);
      if (theButton.type=="button"){
         if (theButton.id == el.id){
             theButton.className = theclass
         }else{
             theButton.className = "default"
         }		
       }
    }
}
</script>

</HEAD>
<BODY>

<table>
<tr>
 <td>
      <input type="button" class="default" value="another button" id=button1 name=button1 onmouseover="javascript:change('on')">
 </td>
 <td>
      <input type="button" class="default" value="a button" id=button2 name=button2 onmouseover="javascript:change('on')">
 </td>
 <td>
      <input type="button" class="default" value="another button" id=button3 name=button3 onmouseover="javascript:change('on')">
 </td>
 <td>
      <input type="button" class="default" value="a button" id=button4 name=button4 onmouseover="javascript:change('on')">
 </td>
</tr>
</table>
</BODY>
</HTML>

good luck

**alda.b** · Oct 7, 2002 08:47

Wow! That is totally different than what I was thinking. I'll give it a go...

User Tag List

Thread: controlling button formatting with onClick

Thread Tools

Display

controlling button formatting with onClick

Bookmarks

Bookmarks

Posting Permissions