Why new object is keep being undefined?

Question

Why my object newEmp is not defined?

I'm trying to create this "Employee Management System".

On click of the Add New Employee button there's an EventListener which invokes addNew() .

addNew() does this:

1. e.preventDefault() .
2. takes the values of the form inputs.
3. assigning them into a new object - newEmp through Employee() Constructor function.

When finished I check the value of my new Object - newEmp and the console tells me:

"newEmp is not defined".

js file:

//Form HTML Elements
var empName = document.getElementById("emp-name");
var empSkill = document.getElementById("emp-skill");
var empTitle = document.getElementById("emp-title");
var addNewEmp = document.getElementById("btn-add-new-emp");

//Event Listener - add new employee
addNewEmp.addEventListener("click", addNew);


//Adding new Employee
function addNew(e){
    e.preventDefault();

    // 1. Create "newEmp" Object based on newEmployee constructor function
    // 2. Assign the inputs.values inside the "newEmp" Object

    empName = empName.value;
    empSkill = empSkill.value;
    empTitle = empTitle.value;

    var newEmp = new Employee(empName, empSkill, empTitle);
    console.log(newEmp);

    document.getElementById("myForm").reset();
    return newEmp;
}

//New Employee  -  Constructor function
function Employee(name, skill, title) {
    this.name = name;
    this.skill = skill;
    this.title = title;
}

html file:

<section id="addNewEmployee">
    <h2>Employee Management System</h2>
    <form action="" id="myForm">
        <input type="text" id="emp-name" placeholder="Employee Name...">
        <input type="text" id="emp-skill" placeholder="Employee Skill...">

        <select name="title" id="emp-title">
            <option value="developer">Developer</option>
            <option value="seo">SEO</option>
            <option value="teacher">Teacher</option>
            <option value="designer">Designer</option>
        </select>

        <button id="btn-add-new-emp">Add New Employee</button>
    </form>
</section>

Answer 1

I just tried your example on jsfiddle and it worked for me, I got console output:

Employee {name: "name", skill: "skill", title: "developer"}

Must be something else causing that:

https://jsfiddle.net/1p1ym3pv/

Answer 2

I think I found the problem. newEmp should be first assign globaly, and not localy inside a function, so when I try to return a new value back from the function it will have a place to save the new info.

//Form HTML Elements
var empName = document.getElementById("emp-name");
var empSkill = document.getElementById("emp-skill");
var empTitle = document.getElementById("emp-title");
var addNewEmp = document.getElementById("btn-add-new-emp");

// New Empoyee Object
var newEmp = {};

//Event Listener - add new employee
addNewEmp.addEventListener("click", addNew);


//Adding new Employee
function addNew(e){
    e.preventDefault();

    // 1. Create "newEmp" Object based on newEmployee constructor function
    // 2. Assign the inputs.values inside the "newEmp" Object

    empName = empName.value;
    empSkill = empSkill.value;
    empTitle = empTitle.value;


    newEmp = new Employee(empName, empSkill, empTitle);

    document.getElementById("myForm").reset();
    return newEmp;
}

//New Employee  -  Constructor function
function Employee(name, skill, title) {
    this.name = name;
    this.skill = skill;
    this.title = title;
}