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

Question

Whenever I print any text to the console that is being printed successfully. But when I try to print the HTML line to the console even with ID or class name. That is not working and giving me the output null. I have this HTML code:

<!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>

The CSS code is:

* {
  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;
}

And the JavaScript code is:

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

The "hi" text printed successfully to the console, but the second line gives me "null" in Chrome. I have also reinstalled Chrome.

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

You're running the script before the DOM has appeared. Place your script call just before the `
` tag so you allow the DOM to establish. — Andy, Jul 20 '21 at 04:28
@Andy Your comment has solved my problem. You can post an answer. I will accept that. — Faizan Ashiq, Jul 20 '21 at 04:41
The link is broken - *"Sorry, the file you have requested does not exist."* — Peter Mortensen, Oct 20 '21 at 07:42

Praveen Kumar · Answer 1 · 2021-07-20T04:38:25.630

0

You have added <script> tag in the head section that means your javascript load before the <p id="message"> tag which you want to get and log in console.

Solution - add you script file just before </body> tag closing.

edited Jul 20 '21 at 04:38

answered Jul 20 '21 at 04:33

Praveen Kumar

49
1
6

score 0 · Accepted Answer · answered Jul 20 '21 at 04:45

Your Javascript code is running before the HTML finishes loading, to prevent this, add the defer attribute to your <script> tag as follows

<!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>

score -1 · Answer 3 · answered Oct 20 '21 at 07:46

-1

You have to remove the -script- tag to the -head- and put it to the end of the -body-

answered Oct 20 '21 at 07:46

Gre

1

Praveen Kumar already said this – klutt Oct 20 '21 at 07:54

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

3 Answers3