Getting form data using an IIFE

Can someone share a code snippet or tutorial on how to get form data using an IIFE. I am trying to create an object from the values retrieved from the form. Almost all my googling results in tutorials on what an IIFE is and how to create one but none on retrieving form data using an IIFE. Below is what I am trying to do.

Button to attach event listener to.

<div id="btn">Click Me!</div>

Add event listener to id and try to create an object for later use using IIFE

document.getElementById('btn').addEventListener('click', function(e) {
    const userData = (function getUserData() {
        let name = document.getElementById('name').value;
        let feet = parseFloat(document.getElementById('feet').value);
        let inches = parseFloat(document.getElementById('inches').value);
        let height = (feet * 12) + inches;
        let weight = parseFloat(document.getElementById('weight').value);
        let diet = document.getElementById('diet').value;
        return {name, height, weight, diet};
    })();
});

I then want to use that user data retrieved from the fields in the form

console.log(userData);
const person = new Person(userData.name, userData.height, userData.weight, userData.diet); 

An IIFE is just a name for a function that gets executed immediately, it doesn’t have anything to do with what you describe. It’s like asking “how do I use walking to read a book” – it doesn’t really make sense. What exactly are you trying to do?

I updated the post showing what I am trying to do.

An IIFE is pointless in this case, because what you’ve written is exactly the same as:

document.getElementById('btn').addEventListener('click', function(e) {
  let name = document.getElementById('name').value;
  let feet = parseFloat(document.getElementById('feet').value);
  let inches = parseFloat(document.getElementById('inches').value);
  let height = (feet * 12) + inches;
  let weight = parseFloat(document.getElementById('weight').value);
  let diet = document.getElementById('diet').value;
  const userData = {name, height, weight, diet};
});

An IIFE is just a function that executes immediately. You’re already executing a function on click, so you don’t need another function inside that that executes immediately, it’s pointless

It doesn’t do anything, because all you’re doing is assigning to a variable you’ve created inside the function (userData). It’s local to the function, so it gets lost straightaway.

You need to define the variable outside the function, then assign to it in the callback. Even then it’s quite possibly not going to work as you expect, because the event is asynchronous.

Also moving the Person instantiation inside the callback make sense:

let user;

document.getElementById('btn').addEventListener('click', function(e) {
  let name = document.getElementById('name').value;
  let feet = parseFloat(document.getElementById('feet').value);
  let inches = parseFloat(document.getElementById('inches').value);
  let height = (feet * 12) + inches;
  let weight = parseFloat(document.getElementById('weight').value);
  let diet = document.getElementById('diet').value;
  user = new Person(name, height, weight, diet);
});

You would need to show what you’re actually trying to do here though, ie the context (what are you doing with the Person object/s?)

Also, if this is a form, then you use the “submit” event and it gives you all the contents of the form fields in an object, HTML already automatically does all the stuff you’re doing manually inside that callback (locating inputs by querying the document)

Thank you for the feedback.

Have you completed the info graphics udacity project?
Why they want IIFE?

Hi, I am trying to achieve the same but couldn’t , can anyone help:

let human = {};

console.log(human);

document.getElementById('btn').addEventListener('click', function(arg){

        arg.name = document.querySelector('#name').value;

        arg.weight = document.getElementById('weight').value;

        arg.diet = document.getElementById('diet').value;

    }(human)

);

console.log(human);

But its not updating the object. I am using IIFE to achieve this;
DanCouper Sir method is also not working

Apologies for the very late reply but as you didn’t @ me there was no way to know you’d replied. Again, like the OP, you aren’t giving any explanation as to what you’re trying to do.

addEventListener takes a function as the second argument. An IIFE resolves to a value immediately, so it’s not a function. It’s just writing a function and then immediately executing it.