JavaScript - Is there any way to dynamically create a new instance of a object?

Question

I am working on a small project where by i need to create objects with form field data. In short i have a constructor function that retrieves values from each form field like this:

var Task = function() {
  this.title = document.getElementById("task-title").value;
  this.date = document.getElementById("task-date").value;
  this.option = document.getElementById("task-option").value;
}

What i need is create a NEW instance of object each time somebody clicks the submit button. What i have so far is this:

var submitBtn = document.getElementById('#someID');
submitBtn.addEventListener('click', function(event) {
   event.preventDefault();
   var newTask = new Task();           
});

This works in that it create an object, but the objects gets overridden each time the button is pressed. I need a new instance of the object to be created each time the buttoned is pressed.

Is this possible ? if not is there a more viable alternative to constructor functions? Thank you so much.

using var Task = function(){} is a singleton and an instance in itself. if you want multiple instances, create a function Task(){} and declare it like var task = new Task() — A.J.
– A.J., Commented Apr 28, 2016 at 14:20
Uh? new Task(); will always created a new object. What do you mean by "the objects gets overridden"? What exactly are you doing with newTask? — Felix Kling
– Felix Kling, Commented Apr 28, 2016 at 14:21
@a.j.: var Task = function() {} and function Task() {} are the same thing. The OP is already doing new Task() too. — Felix Kling
– Felix Kling, Commented Apr 28, 2016 at 14:22
You are creating a new instance each time you click. You just never do anything with it before it falls out of scope. — Quentin
– Quentin, Commented Apr 28, 2016 at 14:24

RobbyD · Accepted Answer · 2016-04-28 14:26:32Z

1

You're defining that newTask variable inside the enventlistener and then immediately assigning the new Task to it. Your code is doing everything you told it to do. Namely, create a new variable and assign a new instance of task to it. After the function ends the newTask is destroyed because there's nothing to do anymore and nowhere else in your code are you able to reach it.

Why dont you try this:

var submitBtn = document.getElementById('#someID');
var myTasks = [];
submitBtn.addEventListener('click', function(event) {
  event.preventDefault();
  myTasks.push(new Task());           
});

answered Apr 28, 2016 at 14:26

RobbyD

5233 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Frederick M. Rogers Over a year ago

Thank you kind sir! Works like a charm. You and @Johnny John replied at the same time but as i mentioned in my comment to him i am giving it to you as you have a few less asweres in your profile. Thank you and have a nice day!

Johnny John · Accepted Answer · 2016-04-28 14:25:56Z

1

That's because you are always putting the value in the same var, you will need make a array with your objects, so you don't lose your old object

var submitBtn = document.getElementById('#someID');
var newTask = [];
submitBtn.addEventListener('click', function(event) {
   event.preventDefault();
   newTask.push(new Task());           
});

answered Apr 28, 2016 at 14:25

Johnny John

3842 silver badges10 bronze badges

1 Comment

Frederick M. Rogers Over a year ago

Johnny John, Thank you for your reply, it worked beautifully. @RobbyD gave me the same answer just about the same time you did. He has less answers so in an attempt to be fair i'm giving it to him. Thank you for taking the time.

Collectives™ on Stack Overflow

JavaScript - Is there any way to dynamically create a new instance of a object?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related