Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Instead of</p> <pre><code>StartCountdown.closeInputField; </code></pre> <p>You'll want to call the function with</p> <pre><code>this.closeInputField(); </code></pre> <p><strong>Note:</strong> Make sure you use <code>()</code> to call a function. Without them, you're just referencing the function, not calling it.</p> <hr> <p>You also don't have to create the prototype that way.</p> <p>After creating the function, you can simply attach to the existing prototype.</p> <pre><code>var StartCountDown = function() { // ... }; StartCountDown.prototype.closeInputField = function() { // ... }; </code></pre> <hr> <p>After looking taking a look at your fiddle, I see a couple other areas for improvement as well. These are just some ideas for you to use as you'd like.</p> <p><a href="http://jsfiddle.net/2nXbN/6/" rel="nofollow">Here's a jsfiddle demo</a></p> <p>Timer</p> <pre><code>var Timer = function(elem) { this.seconds = 0; this.elem = elem; this.initialize(); }; Timer.prototype.initialize = function() { this.timer = document.createElement("span"); this.timer.innerHTML = "0:00"; this.input = document.createElement("input"); this.button = document.createElement("button"); this.button.innerHTML = "Submit"; this.button.addEventListener("click", this.startTimer.bind(this)); this.elem.appendChild(this.timer); this.elem.appendChild(this.input); this.elem.appendChild(this.button); }; Timer.prototype.startTimer = function(event) { this.removeInput(); this.seconds = parseInt(this.input.value) * 60; this.interval = window.setInterval(this.countDown.bind(this), 1000); event.preventDefault(); }; Timer.prototype.stopTimer = function() { this.updateTimer("Done!"); window.clearInterval(this.interval); }; Timer.prototype.updateTimer = function(text) { this.timer.innerHTML = text; }; Timer.prototype.countDown = function() { if (this.seconds === 0) { return this.stopTimer(); } this.updateTimer(this.timeRemaining(this.seconds)); this.seconds--; }; Timer.prototype.timeRemaining = function(seconds) { var minutes = Math.floor(seconds/60), seconds = seconds % 60, separator = seconds % 2 === 0 ? ":" : " "; if (seconds.toString().length &lt; 2) { seconds = [0, 0, seconds].slice(-2).join(""); } return minutes + separator + seconds; }; Timer.prototype.removeInput = function() { this.input.remove(); this.button.remove(); }; </code></pre> <p>Usage</p> <p>Find a DOM element (<code>elem</code>) you want to behave like a timer and call <code>new Timer(elem)</code></p> <pre><code>var timer = document.getElementsByTagName("div")[0]; new Timer(timer); </code></pre> <p>Multiple timers</p> <pre><code>var timers = document.getElementsByTagName("div"); for (var i=0, len=timers.length; i&lt;len; i++) { new Timer(timers[i]); } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload