How do I make an event happen only when a button is clicked? - Programmers Heaven

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


How do I make an event happen only when a button is clicked?

sashimi17sashimi17 DallasPosts: 7Member
edited July 2014 in JavaScript

I'm trying to make a button that, when clicked, will start a countdown from a number in a text box, reducing the number by one every second. This is going all right, but the issue is that when I finish a countdown and then change the value in the text box, the countdown immediately starts again. I want the countdown to wait until the user clicks the button again, not immediately go as soon as there is a non-zero value in the text-box.

This is what the code looks like:

function countdown(){
var start = document.getElementById("start").value;
var x = start;
if(x > 0){
document.getElementById("start").value = x-1;

My button has an onClick event that looks like this:
onClick="setInterval('countdown()', 1000)"
my input box with the number has an id of "start"

I can't figure out how to write this question with the html intact : P

Thank you!


  • sashimi17sashimi17 DallasPosts: 7Member

    I figured out the answer to my own question. I should have been using setTimeout() and an if statement to call the function recursively.

    function countdown(){
    //get value in the "start" textbox
    //set x equal to that value
    if (x > 0){
    //change the value of the "start" textbox
    //use setTimeout to call the countdown() again after 1000 miliseconds

    And then just call countdown() as an onClick event in my button, without any setTimer() or setInterval().

    I suppose there are better ways to do this, though : P

  • sashimi17sashimi17 DallasPosts: 7Member

    I'm sorry- I don't know how to write these posts in a way that doesn't look like a complete mess.

  • IcepickleIcepickle GermanyPosts: 49Member

    concerning your question, i made a small example fiddle for you:

    // a place to store your running interval
    var interval;
    // method that actually decreases the textbox (if it has an integer value)
    function decreaseTimer(elem) {
        var el = document.getElementById(elem), val;
        if (el) {
            val = parseInt(el.value);
            if (val > 0) {
                el.value = val - 1;
            } else {
                // stop when it reaches 0 (or if it wasn't numeric at all)
    // starts the countdown (in case there is none running yet)
    function startCountdown() {
        if (interval) {
            alert('interval already running, please stop first, or wait till it\'s finished');
        // point the interval method to the decreaseTimer method, add countMeDown (input id) to the method
        interval = setInterval(decreaseTimer.bind(null, 'countMeDown'), 1000);
    // stop the interval (in case there is one)
    function stopCountdown() {
        if (interval) {
            // clear the interval
            interval = null;

    concerning the formatting:
    just add 4 spaces per line of code // indentation ;)

    if (case) {
        // indentation
              // another one
Sign In or Register to comment.