1 js嵌入html使用

最新推荐文章于 2024-02-22 19:19:24 发布

paipai大星

最新推荐文章于 2024-02-22 19:19:24 发布

阅读量1k

点赞数

分类专栏： js 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/no996yes885/article/details/131863979

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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.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>

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