Two events in one -

**pcbrainbuster** · 02-25-2007, 12:28 AM

Hello all

,

I have seen some sites long ago which had a button which executed a script onclick, but these buttons when clicked again did a different job then before and that is something that wish to know on how to do now.

An example would be - there is a button click it once the background is yellow, click it again the background is blue, click it again the background is gray nad click it again it is back to yellow.

So simply i just want to know how to assign more than one kind onclick event to one button...

Please help me

**tech_support** · 02-25-2007, 12:58 AM

HTML:

HTML Code:

<form name="form">
<input type="button" onClick="dosomestuff()" name="button">
</form>

JavaScript: //ahh!! won't let me fix the capitalization!

Code:

<script type="text/javascript">
function dosomestuff() {

// Do whatever stuff you want here

document.forms['form'].elements['button'].setAttribute("onClick","someotherfunction()")

}
</script>

**pcbrainbuster** · 02-25-2007, 01:14 AM

You lost me completely

What do you mean???

**tech_support** · 02-25-2007, 01:30 AM

Have you read the comments?

**pcbrainbuster** · 02-25-2007, 01:58 AM

By comments do you mean the first post you made in this topic???
Otherwise i have got no idea on what you are talking about...

**jscheuer1** · 02-25-2007, 03:21 AM

Code:

<script type="text/javascript">
function rotate_bg(){
if(!rotate_bg.ct)
rotate_bg.ct=1
document.body.style.backgroundColor=rotate_bg.ct==1? 'yellow' : rotate_bg.ct==2? 'blue' : 'gray';
rotate_bg.ct=rotate_bg.ct++<3? rotate_bg.ct : 0;
}
</script>

HTML Code:

<input type="button" onclick="rotate_bg();" value="Chng BG">

**pcbrainbuster** · 02-25-2007, 01:13 PM

Thanks for the reply but i am completely confused -

Please explain your script

**Twey** · 02-25-2007, 03:53 PM

document.forms['form'].elements['button'].setAttribute("onClick","someotherfunction()")

An excellent example of how not to set an event (or name elements)

rotate_bg.ct=rotate_bg.ct++<3? rotate_bg.ct : 0;

Note here the difference between ++rotate_bg.ct and rotate_bg.ct++: the fact that you've used the latter here means that rotate_bg.ct will reach 3 before being reset.

Personally, I would do it like this:

Code:

<script type="text/javascript">
  function rotateBackground() {
    return document.body.style.backgroundColor =
      rotateBackground.backgrounds[
        ++rotateBackground.current &#37; 
        rotateBackground.backgrounds.length
      ];
  }
  rotateBackground.current = 0;
  rotateBackground.backgrounds = [
    'yellow',
    'red',
    'green',
    'blue'
  ];
</script>
<input type="button" onclick="rotateBackground(); return false;" value="Change background">

**jscheuer1** · 02-25-2007, 03:55 PM

Well, I cleaned it up a little bit. Here is that version, commented and as part of a demo page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function rotate_bg(){
if(!rotate_bg.ct)  //Is counter not initialized?
rotate_bg.ct=0;  //Initialize and set it to 0 if not.
//Below we set the page's background color to yellow if counter=0, to blue if counter=1, otherwise to gray.
document.body.style.backgroundColor=rotate_bg.ct==0? 'yellow' : rotate_bg.ct==1? 'blue' : 'gray';
//Below we increment the counter's value by one unless it already has reached 2, in which case we set it back to 0.
rotate_bg.ct=rotate_bg.ct++<2? rotate_bg.ct : 0;
}
</script>
</head>
<body>
<input type="button" onclick="rotate_bg();" value="Chng BG"><br>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

**Twey** · 02-25-2007, 04:00 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

(raises an eyebrow)

if(!rotate_bg.ct) //Is counter not initialized?
rotate_bg.ct=0; //Initialize and set it to 0 if not.

Why not just initialise it outside the function?

//Below we set the page's background color to yellow if counter=0, to blue if counter=1, otherwise to gray.
document.body.style.backgroundColor=rotate_bg.ct==0? 'yellow' : rotate_bg.ct==1? 'blue' : 'gray';

I don't usually agree with people when they say this, but you've proved me wrong in one case anyway: nested without proper bracketing and indentation, at least, the conditional operator is virtually unreadable

Thread: Two events in one -

Thread Tools

Search Thread

Two events in one -

Bookmarks

Bookmarks

Posting Permissions