Hide Button When Clicked, Show Button When Timer Runs Out

Question

I currently have a timer , that counts down from 2 minutes. what I would like to happen is when the button is clicked, it is hidden until the timer runs out and when the timer runs out it is visible/clickable again. I would also like the timer to be hidden until the button is clicked, to be visible when the button is clicked and then to be hidden once the timer runs out.

here is my code

js

function startTimer() {
userInput = 120;
if(userInput.length == 0){
    alert("Please enter a value");
} else {
var numericExpression = /^[0-9]+$/;

function display( notifier, str ) {
document.getElementById(notifier).innerHTML = str;
}

function toMinuteAndSecond( x ) {
return Math.floor(x/60) + ":" + x%60;
}

function setTimer( remain, actions ) {
(function countdown() {
   display("countdown", toMinuteAndSecond(remain));         
   actions[remain] && actions[remain]();
   (remain -= 1) >= 0 && setTimeout(countdown, 1000);
})();
}

setTimer(userInput, {
 0: function () { alert( "Time Is Up. Please Sumbit Vote.");       }
}); 

}
}

html

<div id="countdown"></div>
<input type="button" onclick="startTimer()" value="Start Timer"> 

fiddle http://jsfiddle.net/grahamwalsh/qur9r3d8/

Answer 1

You can hide and unhide the button using JS

JSFiddle

Add an ID to your button

<input id="btn" type="button" onclick="startTimer()" value="Start Timer"/>

JScode

function startTimer() {
//hide button
document.getElementById("btn").style.display = "none";
//un-hide timer
document.getElementById("countdown").style.display = "inline";

userInput = 10;
if (userInput.length == 0) {
    alert("Please enter a value");
} else {
    var numericExpression = /^[0-9]+$/;

    function display(notifier, str) {
        document.getElementById(notifier).innerHTML = str;
    }

    function toMinuteAndSecond(x) {
        return Math.floor(x / 60) + ":" + x % 60;
    }

    function setTimer(remain, actions) {
        (function countdown() {
            display("countdown", toMinuteAndSecond(remain));
            actions[remain] && actions[remain]();
            (remain -= 1) >= 0 && setTimeout(countdown, 1000);
        })();
    }

    setTimer(userInput, {
        0: function () {
            alert("Time Is Up. Please Sumbit Vote.");
            //un-hide button
             document.getElementById("btn").style.display = "inline";
           //hide timer
            document.getElementById("countdown").style.display = "none";
        }
    });
  }
 }

Answer 2

Here is a fiddle with the solution:

Use the display property:

document.getElementById("button1").style.display="none";

and to show:

document.getElementById("button1").style.display="block";

fiddle

Make sure to add button1 as an id to your button:

<input id="button1" type="button" onclick="startTimer()"

The fiddle shows where you should put this code...

Answer 3

I went ahead and built it from scratch using JQuery as your friend suggested. I think all the answers here using your setTimeout are taking the wrong approach. This is more of a job for setInterval which will provide slightly less performance overhead and much cleaner code.

Working Example: http://codepen.io/Chevex/pen/RNomGG

First, some simple HTML to work with.

<div id="timerDisplay"></div>
<button id="startTimer">Start Timer</button>

Next, a simple timer script.

// Passing a function to $() is the same as $(document).on('ready', function () { ... });
// It waits for the entire page to be loaded before running the function, which is usually what you want.
$(function () {
  // Get reference to our HTML elements and store them as variables.
  // I prepend them with dollar signs to signify they represent HTML elements.
  var $startTimer = $('#startTimer');
  var $timerDisplay = $('#timerDisplay');

  // The initial time of the timer.
  var time = 120;

  // Hide the timer display for now, until the button is clicked.
  $timerDisplay.hide();

  // Set up a click handler on our $startTimer button.
  $startTimer.click(function () {
    // When the button is clicked, do the following:

    // Set the disabled property to true for our button.
    // Effectively the same as <button id="startTimer" disabled>Start Timer</button>
    $startTimer.prop('disabled', true);

    // Fade in our timer display DIV element.
    $timerDisplay.fadeIn();

    // Set a timeRemaining variable to the value of the initial time.
    var timeRemaining = time;

    // Declare an interval function that runs every second.
    // Also get reference to the intervalId that it returns so we can kill it later.
    var intervalId = setInterval(function () {
      // Every time the interval runs (every second), do the following: 

      // Create a formatted countdown timestamp using the timeRemaining.
      var timeStamp = Math.floor(timeRemaining/60) + ':' + timeRemaining%60;

      // Set the text of our timer display DIV element to our formatted timestamp.
      $timerDisplay.text(timeStamp);

      // If the timeRemaining is zero, clean up.
      if (timeRemaining === 0) {
        // Kill the interval function so it doesn't run again.
        clearInterval(intervalId);
        // Fade out our timer display DIV element.
        $timerDisplay.fadeOut();
        // Show the alert informing the user the timer is up.
        alert('Time is up, please submit a vote :)');
        // Re-enable the startTimer button.
        $startTimer.prop('disabled', false);
      }
      // Otherwise subtract one second from the timeRemaining and allow the interval to continue.
      else {
        timeRemaining--;
      }
    }, 1000);
  });
});