将对象添加到数组onclick Javascript

Question

 var householdData = []; function householdMember(age, rel, smoker) { this.age = age; this.rel = rel; this.smoker = smoker; } addBtn.addEventListener("click", addHouseholdMember); function addHouseholdMember() { var selectedAge = "EaxampleData; var selectedRel = "ExampleData"; var selectedText = "ExampleData"; var selectedSmoker = "ExampleData"; var currentHouseholdMember = new householdMember(selectedAge, selectedText, selectedSmoker); console.log(currentHouseholdMember); return householdData.push(currentHouseholdMember); }; 

I am trying to push the object that I am creating into an array. I can console.log the object when the button is clicked, but not return anything out of the click function, I know I missing something basic, but couldn't find out what.

Answer 1

Fix your selectedAge data (closing quote) and return the new value, not the result of the push.

function addHouseholdMember() {

  var selectedAge = "EaxampleData";
  var selectedRel = "ExampleData";
  var selectedText = "ExampleData";
  var selectedSmoker = "ExampleData";

  var currentHouseholdMember = new householdMember(selectedAge, selectedText, selectedSmoker);
  console.log(currentHouseholdMember);
  householdData.push(currentHouseholdMember);
  return currentHouseholdMember;

};

Answer 2

You have Unterminated string constant here , var selectedAge = "EaxampleData;

insert the closing bracket and try again

  var householdData = []; var addBtn = document.querySelector('.addBtn'); function householdMember(age, rel, smoker) { this.age = age; this.rel = rel; this.smoker = smoker; } addBtn.addEventListener("click", addHouseholdMember); function addHouseholdMember() { var selectedAge = "EaxampleData"; var selectedRel = "ExampleData"; var selectedText = "ExampleData"; var selectedSmoker = "ExampleData"; var currentHouseholdMember = new householdMember(selectedAge, selectedText, selectedSmoker); householdData.push(currentHouseholdMember); console.log(householdData); }; 

 <a class = 'addBtn'>add</a> 

here is the working example https://codepen.io/kamindu/pen/PdwagP?editors=1111

Answer 3

Shift the responsibility of pushing data to the householdMember by creating another function

Instead of loging the value you can also return it

 var addBtn = document.getElementById('btn') var householdData = []; function householdMember(age, rel, smoker) { this.age = age; this.rel = rel; this.smoker = smoker; this.addVal = function() { householdData.push({ age: this.age, rel: this.rel, smoker: this.smoker }) return householdData; } } addBtn.addEventListener("click", addHouseholdMember); function addHouseholdMember() { var selectedAge = "EaxampleData"; var selectedRel = "ExampleData"; var selectedText = "ExampleData"; var selectedSmoker = "ExampleData"; var currentHouseholdMember = new householdMember(selectedAge, selectedText, selectedSmoker); console.log(currentHouseholdMember.addVal()) }; 

 <button id='btn'>Click</button> 

Answer 4

The problem with your code is that you are returning the return value of JavaScript push function. This returns the length of the array. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

What you need to do is first add object to array and then return the array.

householdData.push(currentHouseholdMember);
return householdData;

Answer 5

I am trying to push the object that I am creating into an array.

It is being pushed, just confirmed your code works

I can console.log the object when the button is clicked, but not return anything out of the click function

You are passing to console log just the newly created object, to see the array updated try printing the updated array in a console.log like this working example:

 var householdData = []; function householdMember(age, rel, smoker) { this.age = age; this.rel = rel; this.smoker = smoker; } document.getElementById("button").addEventListener("click", addHouseholdMember); function addHouseholdMember() { var selectedAge = "28"; var selectedRel = "25"; var selectedText = "22"; var selectedSmoker = "21"; var currentHouseholdMember = new householdMember(selectedAge, selectedText, selectedSmoker); console.log(currentHouseholdMember); console.log(householdData); return householdData.push(currentHouseholdMember); }; 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <button id="button">CLICK</button> </body> </html> 

Also realize there is a semicolon missing here in your code

var selectedAge = "EaxampleData <--;

Your logic of passing a callback to click event, then creating new object passing parameters to householdMember function using the new operator to instantiate an object, then pushing new object to array is correct.