Question

我想在提交表单时将表单中的一些数据作为对象返回，但是我无法将数据放在正确范围内的对象中。我不确定为什么控制台在onsubmit事件处理程序中记录newEvent变量也会返回一个事件。

如何在外部范围内访问返回的表单数据？

JSFiddle：http://jsfiddle.net/antfish/crp98hhw/40/

var createTaskForm = document.getElementById('create-task'),
    newTask = new Object();

    //Returns empty object (I would like my returned object accessible in this scope)
    console.log(newTask);

function getFormData(id, newTask) {
    var createTaskForm = document.getElementById(id),
        formElements = createTaskForm.elements;

    createTaskForm.onsubmit = function(newTask) {
        var title = formElements['todo-title'].value,
            content = formElements['todo-content'].value;

        newTask.title = title;
        newTask.content = content;

        //Returns Event
        console.log(newTask);

        return newTask;

    }

}

getFormData('create-task');

Answer 1

通过将newTask设置为getFormData和createTaskForm.onsubmit的输入参数，您将在这些函数的范围内重新声明该变量。要从外部作用域访问该值，您只需要引用它。

Answer 2

尽管定义getFormData取2个参数，但你没有第二个参数就调用getFormData。

但getFormData的第二个参数无论如何都是未被使用的功能，所以我不知道为什么会这样。

从不使用全局定义的createTaskForm变量。

无论如何，如果您希望由newTask创建的onsubmit回调分配您在全局范围中定义的getFormData对象，只需删除{{1来自newTask和内部匿名函数的参数。这样，两者都将关闭全局getFormData对象（即引用它），并且提交事件将导致newTask被修改。

备注：newTask命名非常差，因为它什么都不返回。它应该命名为getFormData或其他。

示例：

setOnsubmitCallback

现在，每次触发提交事件时（例如，通过单击var newTask = {}; // this is simpler than "new Object()" function setOnsubmitCallback(formId) { var createTaskForm = document.getElementById(id); var formElements = createTaskForm.elements; createTaskForm.onsubmit = function () { // do your stuff with the newTask object }; } setOnsubmitCallback('create-task');元素），都会调用您的回调，<input type="submit">对象将包含相应的数据。

编辑：newTask返回事件的原因如下：制作DOM（文档对象模型），以便在调用绑定到DOM事件的回调时（＆＃34; onsubmit＆＃34;是其中之一），它将第一个参数传递给回调函数，该参数是一个Event对象。因此，当它调用您的回调时，console.log(newTask);的值就是该事件对象。

如何在JavaScript中将对象返回到不同的范围？

2 个答案: