html引入外部js失效不起作用的解决办法

问题描述：通过script标签外部引入javascript文件，但不起作用，js代码失效<!DOCTYPE html><html><head><meta charset="utf-8" /><title>登录</title><script src="js/main.js" type="text/javascript"&g

风落_

15740人浏览 · 2021-07-24 20:55:19

风落_ · 2021-07-24 20:55:19 发布

问题描述：

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