当我尝试使用“document.getElementById（'number-panel'）.style.display = 'none'”在我的网站上隐藏一个div时，在replit上，它说“Cannot read properties of null（阅读'style'）.”但是我把同样的代码放到stack overflow的预览中，它工作得很好？我该怎么解决这个问题？下面是我的代码：
/*$(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>
2条答案
按热度按时间fquxozlt1#
如果您将代码作为Stack Overflow片段进行测试，并且加载了
jqueryui.js所依赖的jquery.js，那么代码可能在您的机器上运行。这是两个不同的原因：在堆栈片段编辑器的JavaScript框中提供script.js的JavaScript内容，并在页面中加载jQuery.js。1.在解析完所有HTML并将HTML中定义的元素添加到DOM之后，在代码片段编辑器的JavaScript框中输入的代码被放置在
<body>元素的底部。即使您在HTML框中输入了包含头部和主体部分的完整HTML文档，编辑器似乎也能将其放在正确的位置。但是，它在服务器上不起作用，因为加载
script.js是在正文部分的顶部执行的，在任何HTML元素被解析或放入DOM之前。因此，null值由getElementById()调用返回。1.我只能猜测你正在加载
jquery.js，但在JavaScript中的jQuery代码被注解掉的同时（错误地）将其从帖子中删除-即使jquery-ui.js也需要jquery.js才能运行。使用“number”类型的输入元素的字符串值而不是字符串的数值有一个非常独立的问题-请参阅我的问题注解了解详细信息。
w8biq8rn2#
错误消息告诉您，通过搜索时，带有
number-panel的id的标记不存在所以，当你尝试推断标签时，标签根本不存在（或不再存在）。您需要考虑脚本需要如何操作，解决方案可能会创建一个加载事件侦听器并在其中执行JavaScript。