引用错误:未定义functionName

Reference error: functionName is not defined

本文关键字：functionName 未定义 错误 引用      更新时间：2023-09-26

当我在HTML元素上使用onClick="functionName()"属性运行任何函数时，它会说functionName没有定义。

但它是有定义的！

function functionName() {
    //functional stuff
}

我也试过：

$(document).ready(function() {
    function functionName() {
        //functional stuff
    }
})

但这对没有影响

在html文件中，按钮在这里

html body div table tbody tr td button

脚本标签在这里

html head script

请有人向我解释为什么会发生这种事。

OnReady应该失败，因为解析器在解析onClick属性时创建了一个事件处理程序。在这种情况下，单击事件被指向一个不存在的（null）函数引用。

以小提琴为代表http://jsfiddle.net/muglio/gzeksLr5/1/（失败）

第二个fiddle表示head标记中的内联javascript。在这种情况下，浏览器在到达onClick属性之前就已经解析并向DOM添加了functionName。

作品http://jsfiddle.net/muglio/LoL9Ldzr/1/

如果你把同样的脚本放在一个外部文件"functionName.js"中，并在头中的同一个地方调用loaded，你就会产生竞争条件的可能性。

脚本可以在解析onclick属性之前或之后加载。没有保证。

通常，您应该避免内联javascript，原因与您希望避免内联css的原因相同。您应该用javascript设置onclick处理程序，以避免将控制器和视图耦合在一起。

<script>
    //Using jquery here because it is clearly being used in the initial ask :)
    $(document).ready(function(){
      function functionName() {
      }
      $('#myButton').on('click',functionName);
   });
</script>
html body div table tbody tr td <button id="myButton"></button>

希望这能帮到你。

相关文章：