By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,285 Members | 2,350 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,285 IT Pros & Developers. It's quick & easy.

making onClick dynamic and functional

P: n/a

My task is to change the value of a button and then make it functional
with the onClick handler. Changing the value to "Play Again" works, but
making the onClick work accordingly does not. The following is a
snippet of the script. What is keeping it from working?

function displaycards1(){
document.form1.reveal1.value="Play Again";
document.form1.reveal1.onClick="setcards();";
}
</script>
<form name="form1">
<input id="reveal1" type="button" value="reveal"
onClick="which_clicked=this; displaycards1(); return false;">
</form>

I greatly appreciate it.
Thanks.
Edit/Delete Message

Jul 6 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a

ex********@yahoo.com wrote:
My task is to change the value of a button and then make it functional
with the onClick handler. Changing the value to "Play Again" works, but
making the onClick work accordingly does not. The following is a
snippet of the script. What is keeping it from working?

function displaycards1(){
document.form1.reveal1.value="Play Again";
document.form1.reveal1.onClick="setcards();";
}
</script>
<form name="form1">
<input id="reveal1" type="button" value="reveal"
onClick="which_clicked=this; displaycards1(); return false;">
</form>
I wouldn't change the onClick value at all. I'd set up the button this
way:
<input id="reveal1"..... value="reveal" onClick="doTask()">

function doTask() {
if (this.value=="reveal") {
this.value="Play Again";
doReveal();
} else {
this.value="reveal";
doPlayAgain();
}
}

Hope this helps. Stan

Jul 6 '06 #2

P: n/a
Another option is to create two handlers:

function revealHandler() {
this.value = "Play again";
this.onclick = playAgainHandler;
}

function playAgainHandler() {
this.value = "Reveal";
this.onclick = revealHandler;
}

function onload() {
// install first event on button
document.getElementById('reveal1').onclick = revealHandler;
}

st*****@gmail.com wrote:
ex********@yahoo.com wrote:
>My task is to change the value of a button and then make it functional
with the onClick handler. Changing the value to "Play Again" works, but
making the onClick work accordingly does not. The following is a
snippet of the script. What is keeping it from working?

function displaycards1(){
document.form1.reveal1.value="Play Again";
document.form1.reveal1.onClick="setcards();";
}
</script>
<form name="form1">
<input id="reveal1" type="button" value="reveal"
onClick="which_clicked=this; displaycards1(); return false;">
</form>

I wouldn't change the onClick value at all. I'd set up the button this
way:
<input id="reveal1"..... value="reveal" onClick="doTask()">

function doTask() {
if (this.value=="reveal") {
this.value="Play Again";
doReveal();
} else {
this.value="reveal";
doPlayAgain();
}
}

Hope this helps. Stan
Jul 6 '06 #3

P: n/a

st*****@gmail.com wrote:
ex********@yahoo.com wrote:
My task is to change the value of a button and then make it functional
with the onClick handler. Changing the value to "Play Again" works, but
making the onClick work accordingly does not. The following is a
snippet of the script. What is keeping it from working?

function displaycards1(){
document.form1.reveal1.value="Play Again";
document.form1.reveal1.onClick="setcards();";
}
</script>
<form name="form1">
<input id="reveal1" type="button" value="reveal"
onClick="which_clicked=this; displaycards1(); return false;">
</form>

I wouldn't change the onClick value at all. I'd set up the button this
way:
<input id="reveal1"..... value="reveal" onClick="doTask()">

function doTask() {
if (this.value=="reveal") {
this.value="Play Again";
doReveal();
} else {
this.value="reveal";
doPlayAgain();
}
}

Hope this helps. Stan
The following code was entered and when I clicked on the the "Reveal"
button, the script went to the "setcards()" function, not recognizing
that the "Reveal" button was clicked.

function do_tasks(){
if (this.value=="Reveal") {
this.value="Play Again";
display_cards1();
} else {
this.value="reveal";
setcards();
}

}

<form name="form1">
<input name="reveal1" type="button" value="Reveal"
onClick="do_tasks(); return false;">
</form>

Jul 6 '06 #4

P: n/a

Vincent van Beveren wrote:
Another option is to create two handlers:

function revealHandler() {
this.value = "Play again";
this.onclick = playAgainHandler;
}

function playAgainHandler() {
this.value = "Reveal";
this.onclick = revealHandler;
}

function onload() {
// install first event on button
document.getElementById('reveal1').onclick = revealHandler;
}
I tried the above with the following code, but it did not work, the
"Reveal" button did not change to "Play Again" or do anything else. I
added a document.write('testing'); and found that it worked, but the
rest of the code in the function did not get read at all or was not
interpreted properly. Replacing "this.value" with
"document.form1.reveal1.value="Play Again" did not do anything other
make the screen blank.

function reveal_handler(){
document.write("testing");
this.value="Play Again";
this.onClick=playAgainHandler();
displaycards1();
}
function playAgainHandler(){
this.value="Reveal Hand";
this.onClick=reveal_handler();
setcards();
}

<form name="form1">
<input name="reveal1" type="button" value="Reveal"
onClick="reveal_handler(); return false;">
</form>

Is "this.value" the proper code?
I appreciate your assistance.

Jul 6 '06 #5

P: n/a
Hi,

I made an error in the JS code:
>function onload() {
// install first event on button
document.getElementById('reveal1').onclick = revealHandler;
}
should be:

window.onload = function() {
// install first event on button
document.getElementById('reveal1').onclick = revealHandler;
}

This installs the revealHander 'event handler' on the 'onclick' event
after the page is loaded.


ex********@yahoo.com wrote:
Vincent van Beveren wrote:
>Another option is to create two handlers:

function revealHandler() {
this.value = "Play again";
this.onclick = playAgainHandler;
}

function playAgainHandler() {
this.value = "Reveal";
this.onclick = revealHandler;
}

function onload() {
// install first event on button
document.getElementById('reveal1').onclick = revealHandler;
}

I tried the above with the following code, but it did not work, the
"Reveal" button did not change to "Play Again" or do anything else. I
added a document.write('testing'); and found that it worked, but the
rest of the code in the function did not get read at all or was not
interpreted properly. Replacing "this.value" with
"document.form1.reveal1.value="Play Again" did not do anything other
make the screen blank.

function reveal_handler(){
document.write("testing");
this.value="Play Again";
this.onClick=playAgainHandler();
displaycards1();
}
function playAgainHandler(){
this.value="Reveal Hand";
this.onClick=reveal_handler();
setcards();
}

<form name="form1">
<input name="reveal1" type="button" value="Reveal"
onClick="reveal_handler(); return false;">
</form>

Is "this.value" the proper code?
I appreciate your assistance.
Jul 7 '06 #6

P: n/a

Vincent van Beveren wrote:
Hi,

I made an error in the JS code:
>function onload() {
> // install first event on button
> document.getElementById('reveal1').onclick = revealHandler;
>}

should be:

window.onload = function() {
// install first event on button
document.getElementById('reveal1').onclick = revealHandler;
}

This installs the revealHander 'event handler' on the 'onclick' event
after the page is loaded.


ex********@yahoo.com wrote:
Vincent van Beveren wrote:
Another option is to create two handlers:

function revealHandler() {
this.value = "Play again";
this.onclick = playAgainHandler;
}

function playAgainHandler() {
this.value = "Reveal";
this.onclick = revealHandler;
}

function onload() {
// install first event on button
document.getElementById('reveal1').onclick = revealHandler;
}
I tried the above with the following code, but it did not work, the
"Reveal" button did not change to "Play Again" or do anything else. I
added a document.write('testing'); and found that it worked, but the
rest of the code in the function did not get read at all or was not
interpreted properly. Replacing "this.value" with
"document.form1.reveal1.value="Play Again" did not do anything other
make the screen blank.

function reveal_handler(){
document.write("testing");
this.value="Play Again";
this.onClick=playAgainHandler();
displaycards1();
}
function playAgainHandler(){
this.value="Reveal Hand";
this.onClick=reveal_handler();
setcards();
}

<form name="form1">
<input name="reveal1" type="button" value="Reveal"
onClick="reveal_handler(); return false;">
</form>

Is "this.value" the proper code?
I appreciate your assistance.
According to your suggestions, the following should work, but it does
not:

<html>
<body>
<script type="text/javascript">

window.onload = function() {
document.getElementById('reveal1').onclick =
reveal_handler();

}
function display1(){
document.write('test1');
}
function display2(){
document.write('test2');
}
function reveal_handler(){
this.value="Play Again";
this.onClick=playAgainHandler();
display1();
}
function playAgainHandler(){
this.value="Reveal Hand";
this.onClick=reveal_handler();
display2();
}
</script>
<form name="form1">
<input id="reveal1" type="button" value="Reveal">
</form>
</html>

What is missing?
Your assistance is appreciated.

Thanks.

Jul 7 '06 #7

P: n/a
Corrected version:

<html>
<head>
<script type="text/javascript">

window.onload = function() {
document.getElementById('reveal1').onclick =
reveal_handler;

}
function display1(){
document.getElementById('placeholder').innerHTML = 'test1';
// You can not execute document.write when a page is already loaded
// use DOM instead.
}
function display2(){
document.getElementById('placeholder').innerHTML = 'test2';
}
function reveal_handler(){
this.value="Play Again";
this.onclick=playAgainHandler;
// JavaScript is case sensetive, the handler is onclick, not onClick
// and what you do is assign the reference to the function, not invoke
// it: this.onclick = playAgainHandler instead of
// this.onclick=playAgainHandler();
display2();
}
function playAgainHandler(){
this.value="Reveal Hand";
this.onclick=reveal_handler;
display1();
}
</script>
</head>
<body>
<form name="form1">
<input id="reveal1" type="button" value="Reveal">
</form>
<span id="placeholder"></span>
<!-- placeholder to show the message of display1 and display2 in -->
</body>
</html>

hope it helps! I tested it in FF and it works for me.

Good luck,
Vincent
ex********@yahoo.com schreef:
Vincent van Beveren wrote:
>Hi,

I made an error in the JS code:
> >function onload() {
// install first event on button
document.getElementById('reveal1').onclick = revealHandler;
}

should be:

window.onload = function() {
// install first event on button
document.getElementById('reveal1').onclick = revealHandler;
}

This installs the revealHander 'event handler' on the 'onclick' event
after the page is loaded.


ex********@yahoo.com wrote:
>>Vincent van Beveren wrote:
Another option is to create two handlers:

function revealHandler() {
this.value = "Play again";
this.onclick = playAgainHandler;
}

function playAgainHandler() {
this.value = "Reveal";
this.onclick = revealHandler;
}

function onload() {
// install first event on button
document.getElementById('reveal1').onclick = revealHandler;
}

I tried the above with the following code, but it did not work, the
"Reveal" button did not change to "Play Again" or do anything else. I
added a document.write('testing'); and found that it worked, but the
rest of the code in the function did not get read at all or was not
interpreted properly. Replacing "this.value" with
"document.form1.reveal1.value="Play Again" did not do anything other
make the screen blank.

function reveal_handler(){
document.write("testing");
this.value="Play Again";
this.onClick=playAgainHandler();
displaycards1();
}
function playAgainHandler(){
this.value="Reveal Hand";
this.onClick=reveal_handler();
setcards();
}

<form name="form1">
<input name="reveal1" type="button" value="Reveal"
onClick="reveal_handler(); return false;">
</form>

Is "this.value" the proper code?
I appreciate your assistance.

According to your suggestions, the following should work, but it does
not:

<html>
<body>
<script type="text/javascript">

window.onload = function() {
document.getElementById('reveal1').onclick =
reveal_handler();

}
function display1(){
document.write('test1');
}
function display2(){
document.write('test2');
}
function reveal_handler(){
this.value="Play Again";
this.onClick=playAgainHandler();
display1();
}
function playAgainHandler(){
this.value="Reveal Hand";
this.onClick=reveal_handler();
display2();
}
</script>
<form name="form1">
<input id="reveal1" type="button" value="Reveal">
</form>
</html>

What is missing?
Your assistance is appreciated.

Thanks.
Jul 8 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.