从函数返回时，for循环未定义

Question

基本上，我有一个表单提交所选的电台项目。 为了检测所选项目，我使用了for-each循环（标准循环）。

如您所见，我能够返回一个具有testVar值的对象，以便在另一个函数构造函数中使用。 但是，emotionSelected的值变得不确定。

https://codepen.io/aguerrero/pen/PQopxw

var diaryUI = (function() {

    var emotionSelected, emotionList, testVar;

    emotionList = document.getElementsByName("emotion");

    for (var i = 0; i < emotionList.length; i++) {
        if (emotionList[i].checked) {
            emotionSelected = emotionList[i].value;
            break;
        }
    }

    testVar = "hello";

    return {
        getInput: function() {
            return {
                emotion: emotionSelected,
                test: testVar
            }
        }
    }

})();


var mainController = (function(diaryUICtrl) {

    var addEntry = function() {

        var input = diaryUICtrl.getInput();
        console.log(input);
    }

    document.getElementById("submit-entry").addEventListener("click", addEntry);


})(diaryUI);

但是，如果我在方法getInput中移动for-each循环，那么它可以工作。

可能有什么不对？

Answer 1

赋值运算符到dairyUI之后的函数立即运行，这可能是在加载DOM之前。 您可能希望在运行getInput时执行DOM选择，顺便说一下，这可以更简洁地完成。

var diaryUI = (function() {

    var testVar = "hello";

    return {
      getInput: function() {
        return {
          emotion: (document.querySelector("[name=emotion]:checked") || {}).value,
          test: testVar
         }
      }
    }
})();

Answer 2

您正在使用名为Self-Invoking-Function的东西，因此，在您真正提交表单之前，您的初始化对象正在执行。

(function () {
    // body of the function
}());

上面的匿名函数将在定义之后立即调用。 自调用函数的好处是它们使我们能够执行一次代码而不会混淆全局命名空间（不声明任何全局变量）。 参考

运行此代码段以查看代码如何立即执行函数diaryUI 。

 var diaryUI = (function() { var emotionSelected, emotionList, testVar; emotionList = document.getElementsByName("emotion"); for (var i = 0; i < emotionList.length; i++) { console.log(emotionList[i].checked); if (emotionList[i].checked) { emotionSelected = emotionList[i].value; break; } } testVar = "hello"; return { getInput: function() { return { emotion: emotionSelected, test: testVar } } } } )(); var mainController = (function(diaryUICtrl) { var addEntry = function() { var input = diaryUICtrl.getInput(); console.log(input); } document.getElementById("submit-entry").addEventListener("click", addEntry); } )(diaryUI); 

 <label for="emotion"></label> <input type="radio" name="emotion" value="Happy" id="Happy"> Emotion 1<br> <input type="radio" name="emotion" value="Sad" id="Sad"> Emotion 2<br> <input type="radio" name="emotion" value="Neutral" id="Neutral"> Emotion 3 <br><br> <a href="#" id="submit-entry">Submit Diary</a> 

看到？ 您的代码在开始时立即执行。

您需要重新思考如何声明/实现您的功能。

这种方法可以帮助您，但您需要决定是否必须立即执行该代码

 var diaryUI = function() { var emotionSelected, emotionList, testVar; emotionList = document.getElementsByName("emotion"); for (var i = 0; i < emotionList.length; i++) { console.log(emotionList[i].checked); if (emotionList[i].checked) { emotionSelected = emotionList[i].value; break; } } testVar = "hello"; return { emotion: emotionSelected, test: testVar } } var mainController = (function(diaryUICtrl) { var addEntry = function() { var input = diaryUI(); console.log(input); } document.getElementById("submit-entry").addEventListener("click", addEntry); } )(); 

 <label for="emotion"></label> <input type="radio" name="emotion" value="Happy" id="Happy"> Emotion 1<br> <input type="radio" name="emotion" value="Sad" id="Sad"> Emotion 2<br> <input type="radio" name="emotion" value="Neutral" id="Neutral"> Emotion 3 <br><br> <a href="#" id="submit-entry">Submit Diary</a> 

Answer 3

您甚至在点击事件发生之前立即调用diaryUI （ IIFE ）。

我会将diaryUI作为函数引用传递，并在单击处理程序中调用它。

顺便说一句，如果函数在等号（ = ）的右侧，则不需要用括号括起函数。 这已经是一种表达方式了。

运行示例：

 var diaryUI = function() { var emotionSelected, emotionList, testVar; emotionList = document.getElementsByName("emotion"); for (var i = 0; i < emotionList.length; i++) { if (emotionList[i].checked) { emotionSelected = emotionList[i].value; break; } } testVar = "hello"; return { getInput: function() { return { emotion: emotionSelected, test: testVar }; } }; }; var mainController = (function(diaryUICtrl) { var addEntry = function() { var ctrl = diaryUICtrl(); var input = ctrl.getInput(); console.log(input); }; document.getElementById("submit-entry").addEventListener("click", addEntry); })(diaryUI); 

 <label for="emotion"></label> <input type="radio" name="emotion" value="Happy" id="Happy"> Emotion 1<br> <input type="radio" name="emotion" value="Sad" id="Sad"> Emotion 2<br> <input type="radio" name="emotion" value="Neutral" id="Neutral"> Emotion 3 <br><br> <a href="#" id="submit-entry">Submit Diary</a>