1 js嵌入html使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了1 js嵌入html使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.1 直接在html内部使用js代码

使用script标签，在前后标签内部写的代码即为js代码。

	<body>
		<p id="p1">初始段落</p>  <!--id是为了定位需要更改内容的标签-->
		<button type="button" onclick="showNum()">重置</button> <!-- 定义触发事件为onclick，点击按钮后自动执行showNum方法-->
		<script>
			function showNum(){
				document.getElementById("p1").innerHTML = "重置后的结果";   /*找到id为p1的标签，把等号右边的内容赋值进去替换<></>之间的内容，即把初始段落替换掉*/
			}
		</script>
	</body>

运行结果如下，未点击重置按钮：

1 js嵌入html使用,js,javascript,html,前端

点击重置按钮后：

1 js嵌入html使用,js,javascript,html,前端

1.2 外部js嵌入

1.2.1 编写js文件

注意！外部js文件结尾一定要加分号！尤其是花括号结尾！

function showNum(){
	document.getElementById("p1").innerHTML = "重置后的结果";   /*找到id为p1的标签，把等号右边的内容赋值进去替换<></>之间的内容*/
};/*注意,外部js文件结尾一定要加分号！*/

1.2.2 编写html文件

使用<script src="../js/demo1.js"></script>，将js文件的内容嵌入html文件中，相当于html执行了js文件的内容，当然只是定义了一个函数。

	<body>
		<p id="p1">初始段落</p>  <!--id是为了定位需要更改内容的标签-->
		<button type="button" onclick="showNum()">重置</button> <!-- 定义触发事件为onclick，点击按钮后自动执行showNum方法-->
		<script src="../js/demo1.js"></script>
	</body>

运行结果如下，在未点击重置按钮时：

1 js嵌入html使用,js,javascript,html,前端