11.8 初识JS之第一天问题
今天是自学JS的第一天,视频看到了一半就各种问题。
用JS实现显示与隐藏里的问题。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS实现显示、隐藏</title>
<style type="text/css">
div{
width:200px;
height:200px;
background:red;
display:none;
}
</style>
<script>
window.onload = function (){
var oBtn1 = document.getElementById('show_btn');
var oBtn2 = document.getElementById('hide_btn');
var oDiv = document.getElementById('div1');
oBtn1.onclick = function (){
oDiv.style.display = 'block';
};
oBtn2.onclick = function (){
oDiv.style.display = 'none';
};
};
</script>
</head>
<body>
<input id="show_btn" type="button" value="显示" />
<input id="hide_btn" type="button" value="隐藏" />
<strong id="strong1">我也要让它显示~~</strong>
<div id="div1"></div>
<script>
var oStrong = document.getElementById('strong1');
oStrong.onclick = function (){
oDiv.style.display ='block';
};
</script>
</body>
</html>
strong 的效果并没有显示出来。但是把第二节script里的代码复制 放到第一节里是可以实现的。
后来咨询了学过JS的二傻同学,得知,原来oDiv是只属于第一个script的局面定义元素,第二个script并不能调用,而开始的网页也有报错:
Uncaught ReferenceError: oDiv is not defined
纠正的话,可以把第一个script里关于oDiv前的var去掉,让其变成全局元素,或者再次给strong的id再定义个名字。
第一天的学习就遇到了这么多问题。得再接再厉!加油岗巴得~