未捕获的 ReferenceError：在“a”标签中使用时未定义“functionName”答案

【问题标题】：Uncaught ReferenceError: "functionName"is not defined when using in "a" tag未捕获的 ReferenceError：在“a”标签中使用时未定义“functionName”
【发布时间】：2019-09-07 12:26:40
【问题描述】：

我在 href 标记中调用 java 脚本函数，但它显示未定义函数的错误。我还尝试使用锚标记的 id 调用 jquery click 函数，但它没有给出任何响应。

<a href="javascript:ViewCustormerdeee({{$user->id}});">
  <span id="viewCustomer" class="fa fa-eye"></span>
</a>
<script>
  function ViewCustormerdeee(id) {
    console.log(123);
  }
</script>

它应该在控制台中记录123，但它显示错误消息：

未捕获的 ReferenceError: ViewCustormerdeee 未定义

【问题讨论】：

为什么不使用 onClick 事件。
很可能该函数未在全局范围内定义。我建议通过使用addEventListener() 附加事件来解决问题和现代化逻辑。
@RoryMcCrossan — 它位于 <script> 元素的顶层。
是的，但我怀疑 OP 已重组逻辑以显示在问题中。如果真的是这样，它会起作用：jsfiddle.net/namztkwj
您应该提供minimal reproducible example。 laravel 代码无关紧要。只向我们展示 HTML 和 JS。

标签： javascript jquery laravel

【解决方案1】：

    <a onclick="ViewCustormerdeee('"+ {{$user->id}} +"');" ><span id="viewCustomer" class="fa fa-eye"></span></a>

    <script>
       function ViewCustormerdeee(id)
        {
           console.log(id);
        }
    </script>

在此处阅读有关此活动的更多信息https://www.w3schools.com/jsref/event_onclick.asp

【讨论】：

{{$user->id}} 是 laravel 模板代码，它被转换为服务器端的其他东西。它不打算被浏览器使用。
另外，onclick 本身已经过时，应尽可能避免使用。
那么在标签 @RoryMcCrossan 处调用函数的好主意是什么
在纯 JS 中：developer.mozilla.org/en-US/docs/Web/API/EventTarget/…，在 jQuery 中：api.jquery.com/on

【解决方案2】：

我个人会这样做。

onClick= 已过时，应避免使用。

我认为最好的方法是在元素上使用事件监听器。

    <a id="viewCustomerButton" href="javascript:void(0)">
      <span id="viewCustomer" class="fa fa-eye"></span>
    </a>
    <script>
      function ViewCustormerdeee(id) {
        let button = document.getElementById('viewCustomerButton');
        button.addEventListener('click', function() {
            console.log('123');
        });
      }
    </script>

【讨论】：