Question

为什么我的对象＆＃34; newEmp＆＃34;没有定义？

我正在努力创建这个＆＃34;员工管理系统＆＃34;。

点击＆＃34;添加新员工＆＃34; 按钮后，会调用一个EventListener 的 ADDNEW（）

addNew（）执行以下操作：

e.preventDefault（）。
获取表单输入的值。
将它们分配到新对象 - ＆＃34; newEmp＆＃34; 到 Employee（）构造函数功能

完成后，我会检查新对象的值 - newEmp 并且控制台告诉我＆＃34; newEmp未定义＆＃34; 。

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>

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

我的新对象是不是被定义了？

2 个答案: