Блог

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

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

При нажатии Add New Employeeкнопки появляется EventListener which вызывает addNew() .

addNew() делает ли это:

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

По завершении я проверяю значение моего нового объекта — newEmp и консоль сообщает мне:

«newEmp не определен».

js-файл:

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

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

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

Должно быть что-то еще, вызывающее это:

https://jsfiddle.net/1p1ym3pv/

Я думаю, что нашел проблему. 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");

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