我正在尝试运行一个非常基本的代码:
<a href="#" onClick="function(event){
event.preventDefault();
document.getElementById('LogOut-form').submit();
}">LogOut</a>
我甚至不确定,如果这是对的,但是当我点击链接时,我确实看到了错误。
Uncaught SyntaxError:意外的令牌(
我只是想用这样的东西提交表格,有什么我想念的吗? 如果,是的,那将是什么解决方案?
答案 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()是一个函数,无论何时触发点击都会调用。