为什么我的网站在堆栈溢出预览中工作，但在 replit 中不起作用？-解网

问：

当我尝试在我的网站上使用 “document.getElementById（'number-panel'）.style.display = 'none'” 来隐藏 div 时，它会说它“无法读取 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>

javascript html css 空类型错误

如果您将其作为 Stack Overflow 代码段进行测试并加载到哪个代码段上，则该代码可能在您的计算机上运行。这是两个独立的原因：在堆栈代码段编辑器的“JavaScript”框中提供 JavaScript 内容，并在页面中加载。jquery.jsjqueryui.jsscript.jsjQuery.js

在解析所有 HTML 并将 HTML 中定义的元素添加到 DOM 之后，在代码段编辑器的 JavaScript 框中输入的代码将放置在元素的底部。编辑器似乎把它放在正确的位置，即使您在 HTML 框中输入了一个完整的 HTML 文档，其中包含头部和正文部分。<body>

但是，它在服务器上不起作用，因为加载是在 body 部分的顶部执行的，在任何 HTML 元素被解析或放置在 DOM 中之前。因此，调用返回的值。script.jsnullgetElementById()
我只能猜测您正在加载，但在 JavaScript 中的 jQuery 代码被注释掉的同时（错误地）将其从帖子中删除 - 即使也需要运行。jquery.jsjquery-ui.jsjquery.js

使用“number”类型的输入元素的字符串值而不是字符串的数值存在一个完全不同的问题 - 有关详细信息，请参阅我的问题评论。

为什么我的网站在堆栈溢出预览中工作，但在 replit 中不起作用？

Why does my website work in the stack overflow preview but not on replit?

评论

评论