PDA

View Full Version : 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:



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


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



<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
<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>


<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:
<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:


<!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 :)

pcbrainbuster
02-25-2007, 04:04 PM
Thanks for your replys :),

But I guess I am a little stupid so I do not understand it, but I do understand it little so I will be working on both your scripts and trying to fgure out how it works:)

But can John explain how the ?:: part works I have seen it before many times but never understood it:)

Thanks

jscheuer1
02-25-2007, 04:07 PM
Show us your commented version Twey, complete with page and DOCTYPE.

That way pcbrain will get even more explanations.

I set the variable inside the function to protect it.

That and the other stuff is just my way of coding, there are other ways.

pcbrainbuster
02-25-2007, 04:19 PM
Lol i tried and failed:),
Do you guys know any site that can explain every single part of the code?

Twey
02-25-2007, 04:20 PM
I set the variable inside the function to protect it.No, that's accomplished by creating it as a property of the function. Actually defining it inside the function (with its associated burden of checking to see if it's initialised each time the function is called) isn't necessary.
That and the other stuff is just my way of coding, there are other ways.Aye.
Show us your commented version Twey, complete with page and DOCTYPE.Um, OK.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Background Rotation</title>
<script type="text/javascript">
// A function to rotate the background.
function rotateBackground() {

// Set the CSS background-color property of the body element
return document.body.style.backgroundColor =

// to a colour from rotateBackground.backgrounds
rotateBackground.backgrounds[
// Use as little memory as possible -- see below.
rotateBackground.current = (
// based on rotateBackground.current (which should also
// change each time)
++rotateBackground.current &#37;

// and modulus the length of the array to make sure we
// don't get a value that's bigger than we can handle.
// Since the result of this is assigned to the variable,
// also ensures that the variable itself never goes higher
// than necessary, which would waste resources.
rotateBackground.backgrounds.length
)
];
}

// Create the variables as properties of the function to avoid
// polluting the global namespace.

// This starts at -1 so the first time the background is rotated,
// it goes to 0. Set to 0 if the first background is the same as
// your default and you want to skip it the first time around.
rotateBackground.current = -1;

// A list of backgrounds through which to rotate.
rotateBackground.backgrounds = [
'yellow',
'red',
'green',
'blue'
];
</script>
</head>
<body>
<div>
<!-- A button to call the function. -->
<input type="button" onclick="rotateBackground(); return false;" value="Change background">
</div>
</body>
</html>

pcbrainbuster
02-25-2007, 04:29 PM
Heheheheheheheh:confused:,

I still don't get it:( it usually takes me little time but i don't understand what's wrongs with me, i thinnk i am losing it i still DON'T UNDERSTAND!!!.

Can you give me easier examples and work up to here:)

Twey
02-25-2007, 04:32 PM
But can John explain how the ?:: part works I have seen it before many times but never understood it
var a = b == 5 ? 3 : 2;

// is the equivalent of:

var a;
if(b == 5)
a = 3;
else
a = 2;

pcbrainbuster
02-25-2007, 04:37 PM
I read that one day in some site so i pretty much knew that part,
the part that confuses me is the extra : and the ?

The extra ? mean the ifs and else ifs
The extra : mean the else part

Is that correct???

Twey
02-25-2007, 04:42 PM
No, John's are just nested. This is why I said it was virtually unreadable. Think of it as a = (b ? c : (d ? e : (f)));.

jscheuer1
02-25-2007, 04:58 PM
rotate_bg.ct=rotate_bg.ct++<2? rotate_bg.ct : 0;

English with javascript operators still in place:
(what we shall set rotate_bg.ct equal to) = (is rotate_bg.ct plus one less than two) ? (if so, it equals that) : (otherwise it equals zero)

In javascript but grouped for clarity:


rotate_bg.ct=((rotate_bg.ct++)<2)? rotate_bg.ct : 0;

Note on the ++ operator. When testing the value (does) rotate_bg.ct++ (have a value) <2?, it uses the current value but causes the future value to be incremented by one, unless set otherwise later.


___________________________________


document.body.style.backgroundColor=rotate_bg.ct==0? 'yellow' : rotate_bg.ct==1? 'blue' : 'gray';


English with javascript operators still in place:
(what we shall set body's background color equal to) = (is rotate_bg.ct equal to 0) ? (if so, yellow) : (otherwise, is rotate_bg.ct equal to one ) : (in that case, blue) : (otherwise, if we don't have a color yet, gray)

pcbrainbuster
02-25-2007, 05:03 PM
Sorry but nothing i really being understood:(:(:(

mburt
02-25-2007, 05:10 PM
Step 1: Leave
Step 2: Get a good JavaScript book/tutorial
Step 3: Come back
Step 4: Stop asking so many questions

:)

jscheuer1
02-25-2007, 05:10 PM
Well, go back to my example in post #9 in this thread. Copy and paste it into a text only editor and save it as whatever.html - load it in the browser and click the button a few times.

You should be able to do the same thing with Twey's full page example but, I haven't tested it so, I cannot be sure.

Blake
02-25-2007, 05:13 PM
Why not just use a variable to keep track of when the button was clicked, ie



<html>
<head>
<script type="text/javascript">
var clickedOnce = false;

function doSomeStuff()
{
clickedOnce = true;
// do stuff here
}

function doSomeOtherStuff()
{
// do stuff here
}
</script>
</head>
<body>
<form>
<input type="button" onclick="if (!clickedOnce) doSomeStuff(); else doSomeOtherStuff();" value="Click here!">
</form>
</body>
</html>

mburt
02-25-2007, 05:16 PM
You might have to throw a return in there somewhere to reset the final when clicked the third time.

mburt
02-25-2007, 05:21 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
var clickedOnce = false;
function switchValues() {
if (clickedOnce == true)
clickedOnce = false;
else
clickedOnce = true;
window.status = clickedOnce
}
</script>
</head>
<body>
<input type="button" onclick="return switchValues();">
</body>
</html>

jscheuer1
02-25-2007, 05:31 PM
Why not just use a variable to keep track of when the button was clicked

My script, and probably Twey's as well does that. The original example required at least three states though (three colors) so, a simple (is/is not) variable wasn't suitable.

mburt
02-25-2007, 05:36 PM
Ah, I see. I misread the question. I thought it was an on/off type script.

pcbrainbuster
02-25-2007, 05:39 PM
:mad:Watch your language mburt:mad:

I know more than what you think, I just ask alot of questions to make sure I am understanding everything correctly in some cases but in this case I understand nothing about the counters - please just explain how any general counter works I will do the rest on my own seeing as how the counter is the only thing annoying here :)

Anyway go see www.mw-gone-ww.talktalk.net/index.htm and watch what I have scripted it to do...

note: the second prompt is the documents title...

Feel free to complement:) (not quite finished)

Twey
02-25-2007, 05:41 PM
Er, your link is broken...

pcbrainbuster
02-25-2007, 05:43 PM
Try again i edited it and its fixed its desighned fir ie though

Twey
02-25-2007, 06:12 PM
You should probably have a look at this tutorial (http://www.w3schools.com/html/).
<!-- error: no DOCTYPE -->
<html>
<head>
<!-- error: the <title> element is required -->
<!-- error: the <body> is not allowed inside the <head> -->
<body>
<script type="text/javascript">
var a = prompt("Hello sir, what is your name \?")
// The question mark isn't a special character,
// and doesn't need to be escaped in strings
// (it does in regex, but that's another story).
var e = prompt("Mr\. " + a + " - Choose the title.")
var b = prompt("Mr\. " + a + " - Choose a color as your background \(please do not use dark/light).")
var c = prompt("Mr\. " + a + " - Choose a cursor (Choose from 1, 2 or 3).")
// How about some validation?
var d = prompt("Mr\. " + a + " - Choose the text color \(please do not use dark/light).")
if (c=="1") {document.body.style.cursor='files/1.ani'}
else if (c=="2") {document.body.style.cursor='files/2.ani'}
else if (c=="3") {document.body.style.cursor='files/3.ani'}
document.bgColor=b
// document.bgColor is deprecated for
// the CSS property document.style.backgroundColor
document.body.text=d
// document.body.text is deprecated for
// the CSS property document.style.color
document.title=e + " - PCBRAINBUSTER RULZ"
document.write("<marquee behavior='alternate'>Hello " + a + "</marquee>")
// The <marquee> tag is invalid, as is having
// the sequence </ in a script block.
// document.write() slows down page loading
// times.
</script>
</body>
</head>
</html>

pcbrainbuster
02-25-2007, 06:34 PM
I KNOW!!!!!:mad:

I just code in that way:)

AN EVERYTHING WORKS FINE!!!

I just find it easier that way :) I already now abou the whole validation, css, slowing down of the page issues but that was a test from a long time ago - lol i should of mensioned that:)

pcbrainbuster
02-25-2007, 07:37 PM
Well seeing all your scripts and ideas and stuff I made my own script and tried it and it failed but it doesn't look like it should have failed - have a look for your self -

<html>
<head>
<body>
<script>
var counter=1
function startb() {
if (counter==1) {
document.body.style.backgroundColor="blue"
counter=counter+1}
else if (counter==2) {
document.body.stlye.backgroundColor="yellow"
counter=counter+1}
else if (counter==3) {
document.body.style.backgroundColor="gray"
}
}
</script>
<button onclick="startb()" id="button1">Change BG</button>
</body>
</head>
</html>

So have any ideas on why I did not work then :confused:

mburt
02-25-2007, 07:41 PM
You didn't initially add to the counter. (counter++; )

pcbrainbuster
02-25-2007, 07:53 PM
Well mburt,

Isn't counter++ and counter=counter+1 the same thing?

Anyway I did what you said which resulted in the script below -

<html>
<head>
<body>
<script>
var counter=1
function startb() {
if (counter==1) {
document.body.style.backgroundColor="blue"
counter++}
else if (counter==2) {
document.body.stlye.backgroundColor="yellow"
counter++}
else if (counter==3) {
document.body.style.backgroundColor="gray"
}
}
</script>
<button onclick="startb()" id="button1">Change BG</button>
</body>
</head>
</html>

But this also did not work, whats wrong this time?

jscheuer1
02-25-2007, 08:14 PM
<html>
<head>
<body>
<script>
var counter=1
function startb() {
if (counter==1) {
document.body.style.backgroundColor="blue"
counter++}
else if (counter==2) {
document.body.style.backgroundColor="yellow"
counter++}
else if (counter==3) {
document.body.style.backgroundColor="gray"
counter=1}
}
</script>
<button onclick="startb()" id="button1">Change BG</button>
</body>
</head>
</html>

mburt
02-25-2007, 08:19 PM
Yes, you must reset the counter for it to loop through.

jscheuer1
02-25-2007, 08:26 PM
Not to mention spelling the word 'style' correctly in the second if test. Ooops, I just mentioned it.

pcbrainbuster
02-25-2007, 10:12 PM
Lol thanks for your replys:),

Well the style part was obviosly a typo and the counter reset part was supposed to not reset, the mistake was the style and thats pretty much it but thanks alot for all your help:)

WOOOOHOOOOOOO:)
Thanks Guys:)