时间戳

首页 > 解决方案 > 表单提交输入未运行我的 onClick 功能

javascript - 表单提交输入未运行我的 onClick 功能

问题描述

我创建了一个简单的登录表单，并希望在提交表单后运行一个 js 函数。但是，当我单击提交时没有任何反应。HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CARD GAME</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<script src="index.js"></script>
<form>
    Username: <input type="text" id="htmlUsername"><br><br>
    Password: <input type="password" id="htmlPassword"><br>
    <input type="submit" onclick="login()">
</form>
</body>
</html>

JS：

function login(){
    console.log("here")
}

标签： javascripthtmlformsinputonclick

解决方案

按下提交按钮时是否重新加载浏览器窗口？如果是，那么您的表单确实已提交。

您看不到console.log语句的输出，因为默认情况下，浏览器窗口会在表单提交时重新加载。您可以使用禁用此默认行为event.preventDefault()

HTML：

<form>
    Username: <input type="text" id="htmlUsername"><br><br>
    Password: <input type="password" id="htmlPassword"><br>
    <input type="submit" onclick="login(event)">
</form>

JS：

function login(event){
    event.preventDefault();
    console.log("here")
}

建议改进：

  • 不要在元素上使用onclick属性，而是使用在按钮上添加点击事件侦听器。button.addEventListener()

  • 将script元素移动到结束body标记之前。

替代解决方案

另一种方法是保留日志。在浏览器开发者工具的“网络”选项卡中，勾选“保留日志”复选框输入。console.log即使在提交表单时重新加载浏览器窗口，这样做也会保留语句的输出。

有关如何在开发者工具中启用此选项的详细信息，请访问：

如何在 Chrome 开发者工具的网络选项卡中默认启用“保留日志”？

推荐阅读