html引入外部js失效不起作用的解决办法
Posted 风落_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html引入外部js失效不起作用的解决办法相关的知识，希望对你有一定的参考价值。
问题描述：
通过script标签外部引入javascript文件，但不起作用，js代码失效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登录</title>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<form action="XXXXXX" method="post" name="login">
账号：<input type="text" name="username" id="username" /> <br>
密码：<input type="password" name="password" id="password" /> <br>
<input type="submit" name="login" id="login" value="登录"/>
<input type="button" name="logon" id="logon" value="注册" />
</form>
</body>
</html>
原因分析：
html代码的执行顺序是从上到下的，浏览器由上至下解析html代码，如果在head里面引入js，可能会导致js执行时，页面标签还未加载，导致js找不到作用对象，从而失效
解决方案：
在body后面引入外部js文件即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登录</title>
</head>
<body>
<form action="http://42.192.60.64:8080/user" method="post" name="login">
账号：<input type="text" name="username" id="username" /> <br>
密码：<input type="password" name="password" id="password" /> <br>
<input type="submit" name="login" id="login" value="登录"/>
<input type="button" name="logon" id="logon" value="注册" />
</form>
</body>
<script src="js/main.js" type="text/javascript"></script>
</html>
以上是关于html引入外部js失效不起作用的解决办法的主要内容，如果未能解决你的问题，请参考以下文章