文章标题

SNP_fuyun

于 2016-11-08 23:42:47 发布

阅读量322

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/SNP_fuyun/article/details/53091572

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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再定义个名字。

第一天的学习就遇到了这么多问题。得再接再厉！加油~~岗巴得~~~

SNP_fuyun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文章标题

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;
复制链接

扫一扫