if else statement on button timeout works but cannot go back to original state

Question

I have a local webpage on a stand alone machine for use as a Bingo program. On my button to call the balls, I have placed a timer to deactivate the button for three seconds so as to eliminate double clicks from calling two balls together. I have the timer as a Javascript function that is called on the onclick of the ball calling button. This works fine.

I now have a situation where for a special speed round game, I have to turn this off for the duration of this game. I have placed the timer function into an if else if statement that works, but it only works once. If I start with the on radio button selected, I can turn it off, but not back on again without doing a page refresh which wipes out the current game. The same goes for if I start with the off radio button selected.

This is curious as I have another radio button setting that allows for manual changing of the table cell background color that uses an if else if statement and it allows me to change this setting back and forth as many times as I would want without a page refresh.

Here is the code for the the timer deactivating function:

function threesectimeronoff()


{


if(document.getElementById('timeron').checked)


{
$('#aaa').click(function() {
    var aaa =  $(this);
    aaa.prop('disabled', true);
    setTimeout(function() {
        aaa.prop('disabled', false);
    }, 3000);
});

}

else if(document.getElementById('timeroff').checked) {

$('#aaa').click(function() {
    var aaa =  $(this);
    aaa.prop('disabled', true);
    setTimeout(function() {
        aaa.prop('disabled', false);
    }, 0000);
});



}

}

Two radio buttons on the bottom of the page have id's of timeron and timeroff which is checked by the if else statement.

Although one would not be turning these on and off in the middle of a game, I would like to have this work properly in case one of these radio buttons were to be selected by accident. Also, I would like to learn why one if else would work many times, when another will only work once...

Thanks, Stan...

basic sample HTML page code added:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>

</HEAD>
<script type='text/javascript'
src='jquery-1.8.3.js'></script>


<SCRIPT LANGUAGE="Javascript">

function threesectimer()

{

if(document.getElementById('timeron').checked)

{
$('#aaa').click(function() {
    var aaa =  $(this);
    aaa.prop('disabled', true);
    setTimeout(function() {
        aaa.prop('disabled', false);
    }, 3000);


});

}

else if(document.getElementById('timeroff').checked) {

$('#aaa').click(function() {
    var aaa =  $(this);
    aaa.prop('disabled', true);
    setTimeout(function() {
        aaa.prop('disabled', false);
    }, 0000);


});

}

}


</SCRIPT>


<BODY STYLE="background-color: yellow" onload="LoadImages();ResetBoard();myBallsLeft();">

<FORM NAME="bingo">
<TABLE WIDTH="100%" CELLPADDING="0" CELLSPACING="0" STYLE="background-color: white; border: 2px 

solid #FF3399 ridge">
<TR>
<TD COLSPAN="2">

</td>
</tr>
<TR HEIGHT="20" BGCOLOR="YELLOW"><TD width="45%"><CENTER>


<INPUT TYPE="BUTTON" id="aaa" style="font-size:18px" VALUE="CALL NEXT BALL" 

ONCLICK="threesectimer();">  <INPUT TYPE="TEXT" 

style="color:blue;font-size:22px;text-align:center;" SIZE="3" NAME="output" READONLY>

&nbsp;&nbsp;&nbsp;

<DIV>
<BIG><BIG>Timer 
<form name="timeronoff"> 

<input type="radio" name="group2" id = "timeron" value="on" onchange="threesectimer();" checked> 

ON 
<input type="radio" name="group2" id = "timeroff" value="off" onchange="threesectimer();"> OFF
</big></big>

</form>

</div>

</div>

</center>

</BODY>
</HTML>

Here is the JSFIDDLE

Could you post the html that goes with it and if possible a link to jsfiddle ? — Mehdi Karamosly, Nov 18 '13 at 23:11

Mehdi Karamosly · Accepted Answer · 2013-11-19T20:32:08.953

1

Not sure if I understood the issue but below how you disable a timeout:

var timer1 = setTimeout(function() {aaa.prop('disabled', false);}, 3000); // set timeout
clearTimout(timer1); // to clear a timer

You can reset it back again.

UPDATE

Please take a look at this and let me know if this jsfiddle is what you want.

function threesectimer(){
    if(document.getElementById('timeron').checked){
        $('#aaa').click(function() {
            var aaa =  $(this);
            // console.log(aaa); // not required just used for debug purposes
            aaa.prop('disabled', true);
            setTimeout(function() {
                aaa.prop('disabled', false);
            }, 3000);
        });
    } else if(document.getElementById('timeroff').checked) {
        $('#aaa').click(function() {
            var aaa =  $(this);
            // console.log(aaa); // not required just used for debug purposes
            clearTimeout(timer);
            aaa.prop('disabled', false);

        });
    }
}

edited Nov 19 '13 at 20:32

answered Nov 18 '13 at 23:21

Mehdi Karamosly

5,388
2
32
50

Thanks for the response. But the issue is with the if else if statement, not the turning off the timeout. My code does that OK. The if else only works once, in either direction, but will not work back again if the radio buttons are clicked on. i.e. I can turn it off, but not again OR I can turn it on, but not off again, without a page refresh which clears the rest of the page which is no good. I am confused as another if else statement to change cell background color can be turned on, off, on again as many times that I want, but the timeout if else statement only works once. – Stan Nov 19 '13 at 04:18
as I told you post your html code and a jsfiddle reproduction, then I can have an idea about what you are talking about. – Mehdi Karamosly Nov 19 '13 at 05:04
OK, I tried to get something into jsfiddle, but could not. This is my first time trying jsfiddle, so I must have been doing something wrong. I have a link on my server to show the basic stripped down button timer on off issue here: [link]http://www.seocom.com/test/timertest1.html[/link] I can turn it off, but cannot turn it back on again. Thanks again...Stan... – Stan Nov 19 '13 at 16:58
Thanks for the quick response and the re-coding. I tried the updated jsfiddle and it does seem to be able to turn off the timer. I put a copy of the updated function into my full program and it works in Firefox, but IE throws an error of 'console' is undefined and it does not support this type. FWIW to anyone else reading this. I did use your answer, along with Peter Tseng's answer to IE console issues in this posting [link] http://stackoverflow.com/questions/3326650/console-is-undefined-error-for-internet-explorer [\link] to get a working solution to my issues. Thanks, Stan – Stan Nov 19 '13 at 20:23
`console.log` is just used to log data for debug purposes, you can update the code and take it out, then it should work on IE as well. – Mehdi Karamosly Nov 19 '13 at 20:30

if else statement on button timeout works but cannot go back to original state

1 Answers1