javascript无法工作，因为来自其他页面的变量为null（TypeError）

Question

1. 此功能适用于第1页
2. 控制台说TypeError：lightbox（来自下面的函数）为null

3. 灯箱位于第2页

   function setBackgroundImg() {
       var windowHeight = window.innerHeight;
       var bgImg = document.getElementById("kr-home-bg");
       var x = windowHeight + "px";
       bgImg.setAttribute("style","height:" + x); // line in question when page2 loads 
   }
   setBackgroundImg();
   window.addEventListener("resize", setBackgroundImg);
   

当上面的注释被注释掉时，

4. 以下代码适用于page2

5. 取消注释时：TypeError：bgImg（来自上面的函数）为null并且不起作用

6. bgImg在第2页

   var lightbox = document.getElementById("lightbox");
   lightbox.style.display = "none"; //line in question when page1 loads
   var lightboxMaker = document.getElementById("enable-lightbox");
   var closeBu = document.getElementById("close-lightbox");
   var lightbox = document.getElementById("lightbox");
   function closeLightbox() {
       lightbox.style.display = "none";
   }
   closeBu.onclick = closeLightbox;
   
   lightboxMaker.onclick = function() {
       lightbox.style.display = "block";
   };
   

Answer 1

当您运行document.getElementById("kr-home-bg")时，

setBackgroundImg()必须在DOM中可用。这有效onresize的原因是因为元素确实存在。如果JavaScript动态创建HTML，则必须在第一页上运行setBackgroundImg()之前进行。

我认为你可以用CSS来解决这个问题，因为document.getElementById("kr-home-bg")会占用整个窗口：

#kr-home-bg{
  background: url('yourImage.png'); background-size:100%;
}

如果你有一个设定的宽度，只需在100%之前加上一个空格。