js中的点击按钮事件

年前的时候自学过一段时间的html+css,讲真,这一块是我的兴趣点,但有时候真的觉得很无力,怀疑自己的审美,强迫症晚期的人伤不起啊,各种调整,各种不美好……

现在来到了js,三兄弟即将合体,希望我能沉迷其中吧~~

首先写了一个js脚本,效果是用引号中的内容去替代id为“we”中的html内容:

function myFirst()
{
	document.getElementById("we").innerHTML="这里是最新的内容……";
}


然后在主页中去调用它,当点击按钮时函数myFirst()将被调用:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>初识JS</title>
		<script src="js/MyFirst.js"></script>
	</head>
	<body>
		<p>正式进军JS~~~</p>
		<h1 id="we">这里是将要被代替的内容!</h1>
		<button onclick="myFirst()">见证奇迹</button>
	</body>
</html>


在<head>中我们引入了js,注意在<script>和</script>之间是不能写东西的……

当然,这是用的外部js,我们还可以在<head>或<body>里写js,就像css一样,不过为了美观性和可扩展性还是建议用这种方式~~

看效果:

初始状态:

点击按钮后:

还有个问题,标签<button>中可以设置type,即按钮的类型,大多数浏览器默认的是button,但对于本次内容,设置submit或者reset的效果是一样的,我想应该是跟具体的操作有关吧,如果用于<input>时就能体现出二者的差别的,这个以前貌似搞过……

猜你喜欢

转载自blog.csdn.net/u014483914/article/details/79749726