使用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