how do I get prototype to work of a constructor function in JavaScript

Question

 var StartCountdown = function () {

  //grab value from the input text field
  var minutes = document.getElementById("minutes").value;

  //check if the value passed is a number
  if (isNaN(minutes)) {
     timeDisplay.innerHTML = "Enter a numeric value";
     return;
  };

  //this variable will decrement
  secondsRemaining = minutes * 60;

  //the ticking function and the milisecond (1)
  // calls the method repeatedly
  intervalHandle = setInterval(tick, 1000);

  //hide the input field once we have the numeric value
  // document.getElementById("inputArea").style.display = "none";

     StartCountdown.closeInputField;

  };

  StartCountdown.prototype = {

       closeInputField: function() {
               document.getElementById("inputArea").style.display = "none";
       }
  }

I would like to create prototype function of the StartCountdown Constructor function in order to learn how this is done correctly.

Here is the full version without prototype http://jsfiddle.net/2nXbN/2/

Define the prototype after the constructor function is defined, not within it. — Paul S.
– Paul S., Commented Nov 18, 2013 at 17:51
@PaulS. I thought the same thing because the brackets seem a bit off but the prototype is not in the constructor. — HMR
– HMR, Commented Nov 18, 2013 at 17:53
If you're using variables you'd like to access later you should specify them with this.minutes not with 'var minutes' or they wont be available as soon as you've created an instance. An introduction to using constructor functions and prototype can be found here: stackoverflow.com/a/16063711/1641941 — HMR
– HMR, Commented Nov 18, 2013 at 17:56

maček · Accepted Answer · 2013-11-18 18:24:05Z

Instead of

StartCountdown.closeInputField;

You'll want to call the function with

this.closeInputField();

Note: Make sure you use () to call a function. Without them, you're just referencing the function, not calling it.

You also don't have to create the prototype that way.

After creating the function, you can simply attach to the existing prototype.

var StartCountDown = function() {
  // ...
};

StartCountDown.prototype.closeInputField = function() {
  // ...
};

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.

Here's a jsfiddle demo

Timer

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 < 2) {
    seconds = [0, 0, seconds].slice(-2).join("");
  }

  return minutes + separator + seconds;
};

Timer.prototype.removeInput = function() {
  this.input.remove();
  this.button.remove();
};

Usage

Find a DOM element (elem) you want to behave like a timer and call new Timer(elem)

var timer = document.getElementsByTagName("div")[0];
new Timer(timer);

Multiple timers

var timers = document.getElementsByTagName("div");
for (var i=0, len=timers.length; i<len; i++) {
  new Timer(timers[i]);
}

Collectives™ on Stack Overflow

how do I get prototype to work of a constructor function in JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related