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.
