首页 > js给img添加点击事件无效

js给img添加点击事件无效

使用js给一个div下所有img标签添加点击事件,测试时点击后没有执行,浏览器报错TypeError: document.getElementById(...) is null,要怎要修改?

代码:

<script>
function showimg() {
    document.getElementById("showImg").addEventListener("click", function() {
        document.getElementById("showImg").className = 'hide';
        document.getElementById("showImg").innerHTML = '';
    });
    var imgs = document.getElementById("content").getElementsByTagName("img");
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].addEventListener("click", function() {
            document.getElementById("showImg").className = 'show';
            document.getElementById("showImg").innerHTML = '<img src="' + this.src + '">';
        });
    };
}
window.onload = showimg();
</script>
<style>
#showImg{position:absolute;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.9);z-index:99;}
#showImg img{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;max-height:90%;max-width:90%}
#showImg.hide{pointer-events:none;opacity:0;z-index:-1;}
</style>
<div id="content">
<img src="http://ww2.sinaimg.cn/bmiddle/a15b4afegw1f5jkmbd6w3j20p00xcq8f">
</div>
<div id="showImg" class="hide">
</div>

window.onload = showimg; 
// 去掉后面括号,有括号表示调用,返回方法的返回值,
// 没括号表示方法的引用,是这里需要的,你需要将一个事件指定一个回调方法

// 如果方法立即调用,此时dom还没加载完就找不到,所以是null
【热门文章】
【热门文章】