Question

所以我习惯使用Ruby和Java来构建逻辑，但我是前端和Javascript的新手。当我尝试getElementById或getElementsByClassName时，我遇到了div和span的问题，要么是未定义的，要么是null。当我不应该只是调整背景或添加div时，我不得不采用简化的方法。

以下最新一期：

var stars = document.getElementById("starContainer");

function starz() {
  for ( let i = 1; i <= 60; i++){
    var newDiv = document.createElement('div');
    newDiv.style.position = "absolute";
    newDiv.className = "star";
    newDiv.style.height = "15px";
    newDiv.style.width = "15px";
    newDiv.style.color = "white";
    newDiv.innerHTML = "star";
    newDiv.style.borderRadius = "15px";
    newDiv.style.backgroundColor = "white";
    newDiv.style.background = "radial-gradient(circle, rgba(255,255,255,1.0) 1%, rgba(255,255,255,0.0))";
    newDiv.style.left = setLeftPosition();
    newDiv.style.top = setTopPosition();
    
      stars.appendChild(newDiv);
  }
}

function setLeftPosition(){
  let min = Math.ceil(0);
  let max = Math.floor(1400);
  let rand = Math.floor(Math.random() * (max - min)) + min;
  
  return rand + "px";
}

function setTopPosition(){
  let min = Math.ceil(0);
  let max = Math.floor(490);
  let rand = Math.floor(Math.random() * (max - min)) + min;
  
  return rand + "px";
}

#scene {
	position: relative;
  overflow: hidden;
  height: 1000px;
  width: 100%;
  background-color:rgb(0, 24, 63);
  background: linear-gradient(35deg,rgb(0, 24, 63) 10%, rgb(17, 0, 14));
}


#starContainer {
  color: white;
  z-index: -1;
  height: inherit;
  width: inherit;
}

  #ground { 
   position: absolute;
  height: 245px;
  width: 650px;
    border-left:20px solid transparent;
   margin-top: 800px;
 margin-left: 68%; 
  background-color: rgb(2, 2, 2);
  border-radius: 50px;
} 

#middle-ground {
  z-index: 2;
  position:absolute;
  border-bottom: 175px solid rgb(2, 2, 2);
  border-left: 150px solid transparent;
  border-top: 20px solid transparent;
  margin-top:792px;
  margin-left: 845px;
}


#slanted-border {
  position:absolute;
  width: 200px;
  border-bottom: 115px solid rgb(5, 5, 5);
  border-left: 150px solid transparent;
  border-top: 50px solid transparent;
  margin-top:845px;
  margin-left: 730px;
  
}

<!DOCTYPE html>
<html>
<head>


<!-- title & links to scripts & css---> 
	

<div id="scene" onload="starz()">
  <span id="starContainer">
    <!-- <p> I AM JESUS I AM JESUS</p> -->
  </span>
  <div id="slanted-border"></div>
  <div id="middle-ground"></div>
  <div id="lower-ground"></div>
  <div id="ground"></div>
</div>


</body>
</html>

所以这不起作用。记录“stars”（包含starContainer的变量）返回null。我不明白什么是错的。其他时候我有完全风格的div，我必须逐个按类名抓取并循环遍历它们导致undefined并且样式对象没有值。

然而，有时候它会起作用！在后来的问题中，我粗暴地强迫它并通过ID抓住每个div，并且代码有效。在这一个，它适用于codepen（如果我将其设置为onclick，而不是onload）并在我用来上传该代码snippit的提供的小提琴中工作，但它不能用作onload，onfocus或onclick在实际的浏览器中。

请告知

Answer 1

尝试在starz函数中移动var stars = document.getElementById("starContainer");，因此在文档加载时初始化：

＆＃13;

function starz() {
  var stars = document.getElementById("starContainer");
  for ( let i = 1; i <= 60; i++){
    var newDiv = document.createElement('div');
    newDiv.style.position = "absolute";
    newDiv.className = "star";
    newDiv.style.height = "15px";
    newDiv.style.width = "15px";
    newDiv.style.color = "white";
    newDiv.innerHTML = "star";
    newDiv.style.borderRadius = "15px";
    newDiv.style.backgroundColor = "white";
    newDiv.style.background = "radial-gradient(circle, rgba(255,255,255,1.0) 1%, rgba(255,255,255,0.0))";
    newDiv.style.left = setLeftPosition();
    newDiv.style.top = setTopPosition();
    
      stars.appendChild(newDiv);
  }
}

function setLeftPosition(){
  let min = Math.ceil(0);
  let max = Math.floor(1400);
  let rand = Math.floor(Math.random() * (max - min)) + min;
  
  return rand + "px";
}

function setTopPosition(){
  let min = Math.ceil(0);
  let max = Math.floor(490);
  let rand = Math.floor(Math.random() * (max - min)) + min;
  
  return rand + "px";
}

＆＃13;

当我尝试以编程方式调整它们时，为什么div和spans为空值？

1 个答案: