Мой новый объект не определен?

Question

Почему мой объект "newEmp" не определен?

Im пытается создать эту «систему управления сотрудниками».

по щелчку "Add New Employee" кнопку есть более EventListener, которые ссылаются на Addnew().

Addnew() сделать это:

1. e.preventDefault().
2. принимает значения входных данных формы.
3. назначая их в новый объект - «newEmp» через Сотрудник() Конструктор функции.

После окончания я проверить значение моего нового объекта - newEmp и консоль говорит мне «newEmp не определен».

расслоение плотной файла:

//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 файл:

<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

Я просто попробовал ваш пример на jsfiddle и он работал на меня, я консольный вывод:

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

Должно быть что-то другое, что вызывает:

https://jsfiddle.net/1p1ym3pv/

Answer 2

Я думаю, что я нашел эту проблему. newEmp должен сначала назначить globaly, а не localy внутри функции, , поэтому, когда я попытаюсь вернуть новое значение из функции, у него будет место для сохранения новой информации.

//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; 
}