How to change button event on click dynamically using Javascript

Question

I have made a reverse timer using java script. I added button for start and reset separately but need to change the button functionality on click. If I click on start then start functionality should run and at the place of start reset button should come and after click on reset again reset functionality should get start and start button should come. How can I do this. Please suggest.

Here is the code

var interval;
    var minutes = 1;
    var seconds = 00;

    function countdown(element) {
        interval = setInterval(function() {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    alert(el.innerHTML = "countdown's over!");                    
                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
            seconds--;
        }, 1000);
    }
var renew = document.getElementById('renew');
renew.onclick = function() {
    minutes = 1;
    seconds = 00;
    clearInterval(interval);
    interval = null;

     countdown('countdown');    
}

var start = document.getElementById('start');
start.onclick = function() {
    document.getElementById('renew').onclick = function (event){
        <input type="button" value="renew" id="renew" /> 
    };
    if (!interval) {
        countdown('countdown');
    }
}

html code is:

<div id="topmain">
        <div style="margin-left:15px; float:left;">
            <input type="button" value="start" id="start" /> 
            <input type="button" value="renew" id="renew" />
            <div id='countdown' style="color:#0FC;  margin-left:5px; " >

           </div> </div>

can you post your html button code.I just wanna check your JS code works or not. If it works, the solution'll be much easier — polin
– polin, Commented Dec 3, 2012 at 5:22
if you go for jquery the solution will be simple and shorten — Krish
– Krish, Commented Dec 3, 2012 at 5:23

Arun · Accepted Answer · 2012-12-03 05:16:52Z

1

Overlap the buttons and hide reset button , and toggle to show the other button when one is clicked ..

answered Dec 3, 2012 at 5:16

Arun

5821 gold badge6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joshua D. Boyd Over a year ago

Arun has basically the right idea, although I would have put it as: Make seperate Start and Reset buttons. By default hide Reset, and when Start is clicked, hide Start and show Reset.

Muthu Kumaran · Accepted Answer · 2012-12-03 05:37:47Z

Here check out the code,

http://jsfiddle.net/86W5B/2/

All you need to do is adding showing and hiding the buttons like,

start.style.display = 'block';
renew.style.display = 'none';

and

start.style.display = 'none';
renew.style.display = 'block';

Here is the full code,

<div id="countdown"></div>
<input type="button" id="start" value="Start">
<input type="button" id="renew" value="renew" style="display:none">

<script>
var interval;
    var minutes = 1;
    var seconds = 00;

    function countdown(element) {
        interval = setInterval(function() {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    alert(el.innerHTML = "countdown's over!");
                    start.style.display = 'block';
                    renew.style.display = 'none';        
                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
            seconds--;
        }, 1000);
    }

var renew = document.getElementById('renew');
var start = document.getElementById('start');

renew.onclick = function() {
    minutes = 1;
    seconds = 00;
    clearInterval(interval);
    interval = null;

     countdown('countdown'); 
    start.style.display = 'block';
    renew.style.display = 'none';

}


start.onclick = function() {
    start.style.display = 'none';
    renew.style.display = 'block';

    if (!interval) {
        countdown('countdown');
    }
}
</script>

Collectives™ on Stack Overflow

How to change button event on click dynamically using Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related