Question

我提前为这个简单的问题道歉，但是它已经很晚了，我不想睡觉，直到我开始工作......而且我知道在最后几个小时工作其他部分我的头脑麻木了。

基本上，我只是尝试通过为add()分配addEventListener功能来获取提交按钮。当我单击按钮时，它会清除表单，但不会执行任何其他操作。如果我填写字段，然后在Chrome的JS控制台中调用add()，它就能完美运行......很明显，事件监听器没有被添加到按钮中，我不想将内联函数调用。提前谢谢。

HTML：

    <ul>
        <li>
            <label for="firstname">First Name:</label>
            <input type="text" id="firstname"/>
        </li>
        <li>
            <label for="lastname">Last Name:</label>
            <input type="text" id="lastname"/>
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="text" id="email"/>
        </li>
        <li>
            <label for="subject">Subject:</label>
            <input type="text" id="subject"/>
        </li>
        <li>
            <input type="submit" value="Save" id="btnSave"/>
        </li>
    </ul>

JS：

var rolodex = localStorage.getItem('rolodex'); //load stored data if there is any

window.onload = function() {
    rolodex = JSON.parse(rolodex);
    if(rolodex === null) { //if no data, initialize an empty array
        rolodex = [];
    } else {
    console.log(rolodex);
    }
};

var add = function(){
    var SME = JSON.stringify({
        firstname:document.getElementById('firstname').value,
        lastname:document.getElementById('lastname').value,
        email:document.getElementById('email').value,
        subject:document.getElementById('subject').value
    });

    rolodex.push(SME);
    localStorage.setItem('rolodex', JSON.stringify(rolodex));
    alert("Saved");
};

var submit = function(){
    var btnSave = document.getElementById('btnSave');
    btnSave.addEventListener('click', add(), false);
};

Answer 1

有人发布了部分答案，然后删除了它，所以我会把我所做的。

在add()

add

addEventListener

删除了提交功能，并将其内容放入window.onLoad功能，以便自动分配。

JS addEventListener无法正常工作

1 个答案: