"JavaScript function to add objects to an array when button is clicked

Question

"JavaScript function to add objects to an array when button is clicked

var householdData = [];

function createMember(age, relationship, smoker) {
  this.age = age;
  this.relationship = relationship;
  this.smoker = smoker;
}

addBtn.addEventListener("click", addHouseholdMember);
  
function addHouseholdMember() {

      var selectedAge = "EaxampleData";
      var selectedRelationship = "ExampleData";
      var selectedText = "ExampleData";
      var selectedSmoker = "ExampleData";
  
      var currentMember = new createMember(selectedAge, selectedText, selectedSmoker);
      console.log(currentMember);
      return householdData.push(currentMember);
  
};

I am attempting to add the object I've created to an array. Although I can log the object when the button is clicked, I'm unable to return anything out of the click function. I realize I must be missing something simple, but I haven't been able to figure out what it is.

javascript

Answer 1

Answer №1

I am attempting to add the object I have generated into an array.

The object is successfully added, confirming that your code is functioning as expected

When the button is clicked, I can log the object to the console, but I am unable to return anything from the click function.

To see the updated array, try printing it out in a console.log statement like in this 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>

It's important to note that there is a missing semicolon in your code here

var selectedAge = "ExampleData <--;

Your approach of assigning a callback to the click event, creating a new object using the householdMember function with the appropriate parameters, and then pushing the new object to the array is correct.

Answer 2

I am attempting to add the object I have generated into an array.

The object is successfully added, confirming that your code is functioning as expected

When the button is clicked, I can log the object to the console, but I am unable to return anything from the click function.

To see the updated array, try printing it out in a console.log statement like in this 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>

It's important to note that there is a missing semicolon in your code here

var selectedAge = "ExampleData <--;

Your approach of assigning a callback to the click event, creating a new object using the householdMember function with the appropriate parameters, and then pushing the new object to the array is correct.

Answer 3

Answer №2

Correct the selectedAge data (closing quote) and retrieve the updated value, rather than the push outcome.

function addHouseholdMember() {

  var selectedAge = "SampleData";
  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 4

Correct the selectedAge data (closing quote) and retrieve the updated value, rather than the push outcome.

function addHouseholdMember() {

  var selectedAge = "SampleData";
  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 5

Answer №3

Transfer the task of pushing data to the householdMember by implementing a new function

Rather than printing out the value, consider returning it instead

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 6

Transfer the task of pushing data to the householdMember by implementing a new function

Rather than printing out the value, consider returning it instead

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 7

Answer №4

It seems like there is an unterminated string constant in this code snippet. You need to add the closing quotation mark 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>

You can view a working example of this code here.

Answer 8

It seems like there is an unterminated string constant in this code snippet. You need to add the closing quotation mark 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>

You can view a working example of this code here.

Answer 9

Answer №5

Your code has a slight issue where you are mistakenly returning the length of the array instead of the actual array when using the JavaScript `push` function. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

To correct this, make sure to first add the object to the array and then return the updated array like below:

householdData.push(currentHouseholdMember);
return householdData;

Answer 10

Your code has a slight issue where you are mistakenly returning the length of the array instead of the actual array when using the JavaScript `push` function. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

To correct this, make sure to first add the object to the array and then return the updated array like below:

householdData.push(currentHouseholdMember);
return householdData;

"JavaScript function to add objects to an array when button is clicked

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What could be causing the undefined status of this length function?

Error in Next.js: .env variable not defined

Why does the Vue router sometimes refresh the page instead of properly navigating to it? Can you spot the difference between these two code examples?

What is the best way to dynamically select and deselect radio buttons based on a list of values provided by the controller?

I would like to modify the text color of a disabled input field

Ways to incorporate conditional checks prior to running class methods

After the build process, Nextjs Sitemap is eliminating the /en/ from all newly generated web links

Creating a custom PHP webpage and integrating it with a WordPress theme

Issue with Translate3d functionality in fullpage.js not functioning as expected

Ways to incorporate a scroll feature and display an iframe using JQuery

Combining two request.get functions into a single one

The download functionality in HTML5 is not functioning properly, so users are forced to rename files when downloading

Binding Events to Elements within an AngularJS-powered User Interface using a LoopIterator

Ways to determine the current active tab in React are:

I am struggling to send an email using PHP mailer with POST data

Utilizing hyperlinks within NicEdit content and managing events with jQuery

``So, you're looking to retrieve a collection of objects that have a OneToMany

Looking to transition from Node.js version v4.4.5 to v6.11.0 on your Windows system?

Enhancing Website Performance with Vue.js 2.0 Lazy Loading

I aim to showcase particular cookies within an input field using jQuery