Question

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

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

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

Uncaught SyntaxError：意外的令牌（

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

Answer 1

当您使用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);

Answer 2

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

的答案中使用addEventListener

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

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

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

Answer 3

<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>

Answer 4

您尝试使用函数表达式的上下文期望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>

Answer 5

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

Answer 6

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

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

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

Answer 7

如果要将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（）是一个函数，无论何时触发点击都会调用。

javascript错误中的匿名函数

7 个答案: