Although I have experience styling logic with Ruby and Java, I am relatively new to front end development and JavaScript. I am encountering an issue where divs and spans are either undefined or null when I try to access them using methods like getElementById or getElementsByClassName. This has led me to create makeshift solutions just to make simple adjustments to backgrounds or add divs.
My most recent problem is outlined below:
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>Despite my efforts, this code does not seem to function as expected. When I log the "stars" variable (containing starContainer), it returns null, leaving me puzzled about what could be causing the issue. There have been other instances where fully styled divs were accessed one by one using class names and resulted in values returning as undefined for styled objects.
Interestingly, there are times when it does work! In a previous scenario, I resorted to manually grabbing each div by its ID, and the code worked fine. However, in this specific case, it works smoothly on CodePen (when set as an onclick event) and in the fiddle that I used to upload the code snippet, but fails when set as an onload, onfocus, or onclick event in an actual browser.
Any advice or guidance would be greatly appreciated.