Question

我有一个按照模块模式编写的javascript代码：

var controller = function () {

    return {
        init: function() {
            // settings and initialization    
        }

        makeUIactions: function() { 
             //set UI actions, for example callback function of a button:
            document.getElementById("ShuffleButton").addEventListener("click", Shuffle);
            function Shuffle(){};
        }
    }
}

如何将文档对象传递给makeUIactions？

P / S：我收到以下错误：

Cannot read property 'addEventListener' of null

是因为我无法从makeUIactions访问文档吗？

HTML：

<script>
    controller.init();
    controller.makeUIactions();
</script>

<div>
    <input type="button" id="ShuffleButton" style="margin-top:20px" value="Shuffle" data-inline="true">

    <input type="button" id="SubmitButton" style="margin-top:20px" value="Submit" data-inline="true">
</div>

Answer 1

您的代码在加载DOM之前运行，document.getElementById("ShuffleButton")无法找到DOM元素，因此返回null。然后，当您尝试null.addEventListener()时，它会抛出您看到的错误。

你可以通过移动它来修复它：

<script>
    controller.init();
    controller.makeUIactions();
</script>

在</body>标记之前，以便在脚本运行之前DOM元素就位。有关详细信息，请参阅此答案pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it。

将文档对象传递给函数

1 个答案: