Как вернуть объект в другую область JavaScript?

Question

Я хочу вернуть некоторые данные из формы в качестве объекта, когда я отправлю форму, но у меня возникают проблемы с получением данных в объекте в правильной области. Я не уверен, почему консоль регистрирует новую переменную newEvent внутри обработчика события onsubmit и возвращает событие.

Как получить доступ к возвращаемым данным формы во внешней области?

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 без второго аргумента, несмотря на определение getFormData, чтобы принять 2 аргумента.

Но второй параметр getFormData не используется в любом случае, это тело функции, поэтому я не знаю, почему оно там.

Также глобально определенная переменная createTaskForm никогда не используется.

В любом случае, если вы хотите newTask объект, который вы определили в глобальном масштабе, чтобы быть назначены на onsubmit обратного вызова, созданный getFormData, просто удалите параметр 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 объект будет содержать соответствующие данные.

редактировать: Причина console.log(newTask); возвращается событие следующее: DOM (объектная модель документа) выполнена таким образом, что, когда он вызывает функцию обратного вызова, связанного с событием DOM («onsubmit» является одним из них), он передает функции обратного вызова первый аргумент, являющийся объектом Event. Следовательно, когда он вызывал ваш обратный вызов, значением newTask был этот объект события.