making onClick dynamic and functional

[extremerep]

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

 

[stannyc]

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

 

[Vincent van Beveren]

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

 

[extremerep]

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>

 

[extremerep]

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.

 

[Vincent van Beveren]

Hi,

I made an error in the JS code:

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.

 

[extremerep]

Hi,

I made an error in the JS code:


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.

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.

 

[Vincent van Beveren]

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


(e-mail address removed) schreef: