Блог

Главная - Вопросы по программированию - Как я могу исправить эту ошибку при манипулировании DOM и ошибке при выводе HTML-строки на консоль?

Как я могу исправить эту ошибку при манипулировании DOM и ошибке при выводе HTML-строки на консоль?

#javascript #html #css #console.log

Вопрос:

Всякий раз, когда я печатаю какой-либо текст на консоль, который успешно печатается. Но когда я пытаюсь распечатать HTML-строку на консоли даже с идентификатором или именем класса. Это не работает и дает мне нулевой результат. У меня есть этот 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");

Текст «привет» успешно напечатан на консоли, но вторая строка дает мне «ноль» в Chrome. Я также переустановил Chrome.

ссылка на изображение= «https://drive.google.com/file/d/1Iq2kHr6YFFAWl0pHLnpI9uiWY2WyBwno/view?usp=sharing»

Комментарии:

1. Вы запускаете сценарий до того, как появится DOM. Поместите вызов скрипта непосредственно перед </body> тегом, чтобы позволить DOM установить.

2. @Энди, твой комментарий решил мою проблему. Вы можете опубликовать ответ. Я приму это.

3. Ссылка сломана — «Извините, запрошенный вами файл не существует».

Ответ №1:

Ваш код 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>

Ответ №2:

Вы добавили <script> тег в раздел head, что означает, что ваш javascript загружается перед <p id="message"> тегом, который вы хотите получить, и войдите в консоль.

Решение — добавьте файл сценария непосредственно перед </body> закрытием тега.

Ответ №3:

вы также можете обернуть свой код внутрь

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

это гарантирует, что ваш javascript будет выполняться только после загрузки DOM, т. Е. Все ваши HTML-теги и их атрибуты будут сгенерированы и прикреплены к дереву DOM.

Ответ №4:

Вы должны удалить тег-сценария в — голове-и поместить его в конец — тела-

Комментарии:

1. Правин Кумар уже говорил это

Метки: