如何修复 DOM 操作中的此错误以及将 HTML 行发送到控制台时出错？

Question

每当我将任何文本打印到正在成功打印的控制台时。但是当我尝试将 HTML 行打印到控制台时，即使使用 ID 或 class 名称。那不起作用，给我输出 null。我有这个 HTML 代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Number Game</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <main>
      <header>
        <h1>Guess the number between 1 and 100</h1>
        <button class="play-again">Play Again</button>
        <h2 class="result">Result</h2>
      </header>
      <hr />
      <section class="left-content">
        <input type="number" class="input-value" />
        <button class="check-result">Check</button>
      </section>
      <section class="right-content">
        <p class="message" id="message">Start guessing the number...</p>
        <p class="label-score">Score: <span class="score">20</span></p>
        <p class="label-highscore">
          Highscore: <span class="highscore">0</span>
        </p>
      </section>
    </main>
  </body>
</html>

CSS代码是：

* {
  font-family: Raleway, sans-serif;
  box-sizing: border-box;
}

h1 {
  margin-top: 30px;
  font-size: 150%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
}

.play-again {
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: fit-content;
  display: block;
  border: none;
  background-color: rgb(38, 194, 64);
  border-radius: 3px;
}

.result {
  text-align: center;
}

.left-content {
  margin-left: auto;
  margin-right: auto;
  float: left;
  width: 50%;
}

input {
  width: 50px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 50%;
  display: block;
}

.right-content {
  margin-left: auto;
  margin-right: auto;
  float: left;
  width: 50%;
}

.check-result {
  padding: 5px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  background-color: rgb(38, 194, 64);
  border-radius: 3px;
  border: none;
}

.check-result:hover,
.play-again:hover {
  box-shadow: 0px 0px 10px black;
}

而 JavaScript 代码是：

"use strict";
console.log(document.querySelector("#message"));
console.log("hi");

“hi”文本成功打印到控制台，但第二行在 Chrome 中给我“null”。我也重新安装了 Chrome.

图片link= "https://drive.google.com/file/d/1Iq2kHr6YFFAWl0pHLnpI9uiWY2WyBwno/view?usp=sharing"

Answer 1

您已在头部部分添加了 <script> 标签，这意味着您的 javascript 在您想要获取并登录控制台的 <p id="message"> 标签之前加载。

解决方案 - 在 </body> 标签关闭之前添加脚本文件。

Answer 2

您的 Javascript 代码是运行在 HTML 完成加载之前，为防止这种情况，请将 defer 属性添加到您的 <script> 标记，如下所示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Number Game</title>
    <link rel="stylesheet" href="style.css" />
    
    <!-- Adding the defer attribute -->
    <script src="script.js" defer></script>
  </head>
  <body>
    <main>
      <header>
        <h1>Guess the number between 1 and 100</h1>
        <button class="play-again">Play Again</button>
        <h2 class="result">Result</h2>
      </header>
      <hr />
      <section class="left-content">
        <input type="number" class="input-value" />
        <button class="check-result">Check</button>
      </section>
      <section class="right-content">
        <p class="message" id="message">Start guessing the number...</p>
        <p class="label-score">Score: <span class="score">20</span></p>
        <p class="label-highscore">
          Highscore: <span class="highscore">0</span>
        </p>
      </section>
    </main>
  </body>
</html>

Answer 3

您也可以将代码包装在里面

document.onload(function() {
   //do whatever you want
});

这可以确保您的 javascript 仅在 DOM 加载后执行，即所有 HTML 标签及其属性都已生成并附加到 DOM 树.

Answer 4

你必须删除-script-标签到-head-，并把它放到-body-的末尾

如何修复 DOM 操作中的此错误以及将 HTML 行发送到控制台时出错？

How can I fix this error in DOM manipulation and error getting an HTML line to the console?

javascript

html

css

console.log