javascript错误中的匿名函数

时间:2016-12-30 11:46:52

标签: javascript

我正在尝试运行一个非常基本的代码:

<a href="#" onClick="function(event){
   event.preventDefault();
   document.getElementById('LogOut-form').submit();
 }">LogOut</a>

我甚至不确定,如果这是对的,但是当我点击链接时,我确实看到了错误。

  

Uncaught SyntaxError:意外的令牌(

我只是想用这样的东西提交表格,有什么我想念的吗? 如果,是的,那将是什么解决方案?

7 个答案:

答案 0 :(得分:3)

当您使用onClick声明函数时使用IIF表达式

 <a href="#" onClick="(
                 function(event){
                    event.preventDefault();  
                    document.getElementById('LogOut-form').submit();
                 })(event) 
          ">LogOut</a>

<a href="#" onClick="(function(event){event.preventDefault();document.getElementById('LogOut-form').submit();})(event)">LogOut</a>

或不使用函数表达式

<a href="#" onClick="event.preventDefault(); document.getElementById('LogOut-form').submit();">LogOut</a>

但是我会推荐你摆脱丑陋的内联点击处理程序,并且不要在旧的和坏的做法中使用内联点击处理程序。您应该使用addEventListener

绑定事件

HTML

<a href="#" id='logout'>LogOut</a>

脚本

document.querySelector('#logout').addEventListener('click', function(event){
    event.preventDefault();
    document.getElementById('LogOut-form').submit();
}, false);

答案 1 :(得分:2)

您不应再使用html元素的on属性。而是在Satpal

的答案中使用addEventListener

在您点击链接时会评估onclick,所以如果您真的想让它工作,您需要将其写为立即调用的函数表达式:

<a href="#" onClick="(function(event){
   event.preventDefault();
   document.getElementById('LogOut-form').submit();
 })(event)">LogOut</a>

但你真的不应该这样做。你应该始终将html,js和css分开。

答案 2 :(得分:2)

<a href="#" onClick="
   event.preventDefault();
   document.getElementById('LogOut-form').submit();
 ">LogOut</a>

function sendData (event) {
  event.preventDefault();
  document.getElementById('LogOut-form').submit();
}
<a href="#" onClick="sendData()">LogOut</a>

答案 3 :(得分:2)

您尝试使用函数表达式的上下文期望function关键字启动函数声明。

函数声明必须具有名称。

无论如何将功能放在那里是没有意义的:你永远不会打电话给它。

onclick属性的值是函数体。

如果您打算沿着这条路走下去,那么您的代码将如下所示:

onclick="event.preventDefault(); document.getElementById('LogOut-form').submit();"

但不要那样做!

由于各种原因,内在事件属性非常糟糕。使用JavaScript绑定您的事件处理程序。

<a href="#">LogOut</a>

document.querySelector("a").addEventListener("click", function(event){
   event.preventDefault();
   document.getElementById('LogOut-form').submit();
});

但也不要这样做!

您有一个指向页面顶部的链接,然后您使用JavaScript“增强”提交表单。

如果JavaScript失败,链接到页面顶部没有任何意义。

在应用JavaScript之前:选择具有最合适语义和默认功能的HTML

在这种情况下,这意味着使用提交按钮

<button>LogOut</button>

如果您不喜欢它的外观,请使用CSS按照您想要的方式设置样式。

button {
  text-decoration: underline;
  color: blue;
  background: none;
  border: none;
  padding: 0;
  display: inline;
}
<button>LogOut</button>

答案 4 :(得分:1)

你在onClick内声明了函数,你应该调用它。在外面定义您的功能,然后从onClick myFunction()调用它。

答案 5 :(得分:0)

我认为你不能直接以这种方式调用函数,导致代码试图创建一个新函数,而不是执行该函数。您应该在某处创建一个函数,并在onclick事件中调用它。例如:

    function myFunction(evt) {
        evt.preventDefault();
        document.getElementById('LogOut-form').submit();
    }

    <a href="#" onClick="myFunction">LogOut</a>

答案 6 :(得分:0)

如果要将click事件直接绑定到HTML元素,那么您应该使用这样的标准方法:

<html>
   <head>
   </head>
   <body>
     <form id="LogOut-form" type="submit"></form>
     <a href="#" onClick="buttonClicked(event)">LogOut</a>
   </body>
   <script>
     function buttonClicked(event){
       event.preventDefault();
       document.getElementById('LogOut-form').submit();
     }
   </script>
</html>

此处, buttonClicked()是一个函数,无论何时触发点击都会调用。