When I try to hide a div on my website by using "document.getElementById('number-panel').style.display = 'none'," on replit, it says that it "Cannot read properties of null (reading 'style')." But I put this same code into stack overflow's preview, and it works perfectly? How can I fix this? Here is my code:
/*$(document).ready(function() {
$(".number-panel").hide();
$(#generate).click(function() {
$(".number-panel").fadeIn();
});
});*/
document.getElementById("number-panel").style.display = "none";
function generateNumber() {
let min = document.getElementById("lowest").value;
let max = document.getElementById("highest").value;
let numberDisplay = document.getElementById("random-number");
if (min != undefined && max != undefined) {
let randomNumber = Math.floor(Math.random() * (max - min) + (min + 1));
numberDisplay.innerHTML = randomNumber;
document.getElementById("number-panel").style.display = "block";
}
} html {
height: 100%;
width: 100%;
}
body {
background-image: radial-gradient(#b8c6ff, #a8baff);
}
@font-face {
font-family: Figtree;
src: url(Figtree-VariableFont_wght.ttf);
}
#title {
transition: font-size 1s;
text-align: center;
font-family: Figtree;
color: white;
padding-top: 22px;
font-size: 37px;
}
/*#title:hover {
font-size: 40px;
cursor: default;
} */
#generate {
transition: height 0.5s, width 0.5s, font-size 0.5s;
background-color: #ffd1d9;
height: 55px;
width: 111px;
font-family: Figtree;
color: #9e6eaf;
font-size: 22px;
box-shadow: 0px 0px 7px #e67a7a;
position: absolute;
top: 22%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
border-color: rgba(0, 0, 0, 0.5);
margin-top: 22px;
margin-left: -44px;
}
#generate:hover {
height: 59px;
width: 115px;
font-size: 23px;
}
input[type=number] {
transition: background-color 0.5s;
margin-bottom: 11px;
position: relative;
left: 44%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
height: 33px;
width: 77px;
font-size: 22px;
border-color: rgba(0, 0, 0, 0.5);
background-color: white;
}
input[type=number]:hover {
background-color: #ededed;
}
#to {
transition: transform 0.5s;
position: absolute;
top: 12%;
left: 48%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: white;
font-family: Figtree;
font-size: 22px;
}
#pick {
color: white;
font-family: Figtree;
font-size: 22px;
transition: transform 0.5s;
position: absolute;
top: 10%;
left: 33%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.number-panel {
position: absolute;
background-color: rgba(128, 128, 128, 0.5);
height: 444px;
width: 333px;
left: 50%;
top: 33%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#number-panel {
position: absolute;
background-color: rgba(128, 128, 128, 0.5);
height: 444px;
width: 333px;
left: 50%;
top: 33%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#generate-again {
transition: background-color 1s;
margin-top: 55%;
margin-left: 33%;
height: 44px;
font-size: 17px;
font-family: Figtree;
background-color: #ffc7c7;
color: #454545;
box-shadow: 0px 0px 7px #2b2b2b;
}
#random-number{
text-align: center;
font-size: 44px;
color: white;
font-family: Figtree;
}
#random-is {
text-align: center;
font-family: Figtree;
color: white;
font-size: 22px;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<script src="script.js"></script>
<!--
This script places a badge on your repl's full-browser view back to your repl's cover
page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green,
teal, blue, blurple, magenta, pink!
-->
<script src="https://replit.com/public/js/replit-badge-v2.js" theme="dark" position="bottom-right"></script>
<h1 id = "title">Random Number Generator!</h1>
<input type = "number" id = "lowest" />
<br>
<input type = "number" id = "highest" />
<p id = "pick">Pick a random number from</p>
<p id = "to">to</p>
<button id = "generate" onclick = "generateNumber()">Generate!</button>
<div class = "number-panel" id = "number-panel">
<p id = "random-is">Your random number is</p>
<p id = "random-number">1</p>
<button id = "generate-again">Generate Again!</button>
</div>
</body>
</html>The code may have worked on your machine if you tested it as a Stack Overflow snippet and also loaded jquery.js on which jqueryui.js depends. That's two separate reasons: providing the JavaScript content of script.js in the "JavaScript" box of the stack snippet editor, and loading jQuery.js in the page.
Code entered in the JavaScript box of the snippet editor gets placed at the bottom of the <body> element after all the HTML has been parsed and elements defined in HTML added to the DOM. The editor seems to get it in the right spot even if you have entered a complete HTML document with head and body sections in the HTML box.
It doesn't work on a server however, because loading script.js is performed at the top of the body section, before any HTML elements have been parsed or placed in the DOM. Hence the null values being returned by getElementById() calls.
I can only guess that you were loading jquery.js but removed it from the post (by mistake) at the same time the jQuery code in the JavaScript was commented out - even though jquery-ui.js also needsjquery.js to run.
There is a quite separate issue with using the string value of an input element of type "number" instead of the numeric value of the string - see my question comment for details.