[SOLVED] How to add two Javascript events to one button.

[iconicCreator]

Hello everyone,

Basically I have a button that calls a function, or the way I see it, it makes something happens.

 

This button fires up an event that makes the page switch CSS style sheets.

 

This is the buttons code:

 

<input name="choice" type="button" value="style-sheet1" onClick="chooseStyle(this.value, 60);" />

]<input name="choice" type="button" value="style-sheet2" onClick="chooseStyle(this.value, 60);" />[/

 

When I click this button, it pulls up the reference style sheet.

 

 

Here's the problem:

 

I must have more then one button to call up the different style sheets.

 

 

I was thinking it would be nice to have one button that calls up the two style sheets.

 

How can I add two events to one button?

 

So if I click the button, it calls the first style sheet, if I press the same button again, it calls another style sheet.

 

So making one button performs two events/function.

 

I have no idea how to get this done.

 

 

Any help or ideas will be greatly appreciated.

 

Thanks everyone.

 

IC

[adam84]

Hey,

 

What I would do is create a function that gets called whenever the button is pressed. Then in the function you can change the style sheets.

 

var counter = 0;

function chooseStyle(obj,num){
  if( counter < 1)
   obj.setAttribute("class",obj.value);
  else if( counter == 2 )
   obj.setAttribute("class",obj.value);
  else if( counter == 3 )
   obj.setAttribute("class",obj.value);
  else if( counter == 4 ){
   obj.setAttribute("class",obj.value);
   counter = -1;
  }

counter++;
}


<input name="choice" type="button" value="style-sheet1" onClick="chooseStyle(this, 60);" />

[iconicCreator]

Hey,

 

What I would do is create a function that gets called whenever the button is pressed. Then in the function you can change the style sheets.

 

var counter = 0;

function chooseStyle(obj,num){
  if( counter < 1)
   obj.setAttribute("class",obj.value);
  else if( counter == 2 )
   obj.setAttribute("class",obj.value);
  else if( counter == 3 )
   obj.setAttribute("class",obj.value);
  else if( counter == 4 ){
   obj.setAttribute("class",obj.value);
   counter = -1;
  }

counter++;
}


<input name="choice" type="button" value="style-sheet1" onClick="chooseStyle(this, 60);" />

 

Thanks very much for the help and time.

 

I have been wondering, lets say you have a button and the text on the button says normal and the when the button is clicked again, it says zoom.

 

I'm talking about a label on the button.

 

Not sure this is possible - but a way that the button can show which style sheet is activated.

 

Thanks again,

 

Patrick

[adam84]

yes it possible.

 

document.getElementById('myButton').value = 'Zoom';

 

just substitute the name of your button and what you want to change the value of the button to.

[iconicCreator]

yes it possible.

 

document.getElementById('myButton').value = 'Zoom';

 

just substitute the name of your button and what you want to change the value of the button to.

 

Thanks so much adam, I have not had the chance to put all this together because I'm away from the computer but will try to shortly.

 

I'm a total novice to Javascript but will try to figure things out.

 

Thanks again,

IC