Howdy, Stranger!

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

Categories

Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

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

sashimi17sashimi17 DallasPosts: 7Member
edited July 24 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; x--; } }

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!

Answers

  • 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: http://jsfiddle.net/Icepickle/71Lw9mve/

    // 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)
                stopCountdown();
            }
        }
    }
    
    // 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');
            return;
        }
        // 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) {
            clearInterval(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.