JS加载位置问题-优快云博客

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<body>
	<p>
		<span>当js文件放在head里面时，如果绑定了onclick事件，就会出现这样的错误，是因为W3School的写法是浏览器先加载完按钮节点才执行的js，所以当浏览器自顶向下解析时，找不到onclick绑定的按钮节点，于是报错。因此，需要把js文件放在底部加载，就会避免该问题。</span>
		<a href="javascript:;">收缩</a>
	</p>
</body>
<style>
	p{
		border:10px solid #ccc;
		background:#FFC;
		width:400px;
		padding:20px;
		font-size:16px;
		font-family:微软雅黑;
		margin:40px auto 0;
	}
</style>
<script>
	var oP=document.getElementsByTagName('p')[0];
	var oSpan=oP.getElementsByTagName('span')[0];
	var oA=oP.getElementsByTagName('a')[0];
	var str=oSpan.innerHTML;
	var onOff=true;
	oA.onclick=function(){
		if(onOff){
			oSpan.innerHTML=str.substring(0,12);
			oA.innerHTML='......>>展开';
		}else{
			oSpan.innerHTML=str;
			oA.innerHTML='>>收缩';
		}
		onOff=!onOff;

	};

	</script>
</head>
</html>

效果图

展开