gpt4 book ai didi

javascript - 如何将 HTML 按钮和 javascript 逻辑分离到不同的文件中

转载 作者:太空宇宙 更新时间:2023-11-04 16:11:39 25 4
gpt4 key购买 nike

我需要在 HTML 文件中拆分按钮,并将其点击 javascript 函数放入 javascript 文件中。

到目前为止,这是我尝试过的:

尝试1:结合HTML提交按钮和按钮的点击功能

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<form id="advertiseForm" name="advertiseForm" method="post" >
<br /><br /><br />
<div style="text-align:center">
<input class="button button2" id="submitbutton" type="button" value="Submit" />
</div>
<script>
$( "#submitbutton" ).on( "click", validatelanded );
function validatelanded( event ){
alert( "Hello." );

}
</script>
</form>
</body>

尝试2:将HTML文件中的HTML sumitbutton按钮及其点击功能分离到js文件中。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript" src="advertisementlandedvalidationatclient.js"></script>
</head>
<body>
<form id="advertiseForm" name="advertiseForm" method="post" >
<br /><br /><br />
<div style="text-align:center">
<input class="button button2" id="submitbutton" type="button" value="Submit" />
</div>
</form>
</body>

advertisementlandedvalidationatclient.js 文件

<script type="text/javascript">
$( "#submitbutton" ).on( "click", validatelanded );
function validatelanded( event ){
alert( "Hello." );

}
</script>

试用 1 有效(我看到警报),试用 2 无效(我没有看到警报)。有什么问题吗?

最佳答案

Trial 1 works ( I see alert) and Trial 2 does not work (I don't see alert). What could be wrong?

在第一次试用中,脚本位于 html 的底部。因此,当呈现 html 时,将解析脚本并绑定(bind)相应的事件处理程序。这没关系,因为有一个具有指定 id 的按钮。

另一方面,在第二次试验中,您已将脚本加载到 html 的 head 标记中。此时js被解析,并没有绑定(bind)这个事件的按钮。 此外,没有必要使用<script>在外部 js 文件中标记。当我们在我们的 html 文件中编写脚本时,我们使用这个标签。以下是非常好的。

<script type="text/javascript" src="advertisementlandedvalidationatclient.js"></script>

如果你试试这个,那么问题就解决了:

$(function(){
$( "#submitbutton" ).on( "click", validatelanded );

function validatelanded( event ){
alert( "Hello." );
}
})

现在,当您的文档准备就绪时,换句话说,当您的 html 将被浏览器呈现时,您将绑定(bind)相应的事件处理程序。

顺便说一句,最好将脚本加载到 html 页面的底部。根据 Progressive enhancement,这是一个很好的做法.

关于javascript - 如何将 HTML 按钮和 javascript 逻辑分离到不同的文件中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34565955/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com