My javascript-code works perfectly on CodeSandbox but not on VisualStudio

Question

So I have created a folder in VS code with an HTML, JS and CSS file, when I open it in the browser it gives me this error in the console:

script.js:21 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at script.js:21

dateTime.innerHTML = ${day}, ${hours}:${minutes};

None of the JS appears to work on VS code, but when I copy the exact same code to code sandbox it works perfectly.

Would really appreciate it if someone could help me solve this issue.

Thanks in advance! :)

*The script tag is okey linked to the html, because if I alert("Hello") The pop up appears in the browser when using VSCode.

This is my HTML code

<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>Repasow2.1</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
      crossorigin="anonymous"
    />
    <script
      src="https://kit.fontawesome.com/4407b52ce0.js"
      crossorigin="anonymous"
    ></script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@1,300&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="source/style.css" />
    <script src="source/script.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="weather-app">
        <div class="row one">
          <form class="form-search" id="form">
            <div class="col-9 enter-city">
              <input
                class="enter-city-engine"
                type="text"
                placeholder="Enter your city"
                id="enter-city"
                autocomplete="off"
              />
            </div>
            <div class="col-3 search">
              <input
                class="search-engine"
                id="submit-button"
                type="submit"
                value="Search"
              />
            </div>
          </form>
        </div>

        <div class="row two">
          <div class="col icon-temperature">
            <span class="icon-icon-temperature">
              <i class="far fa-sun"></i>
            </span>
            <span class="temperature" id="temperature"> 29 </span>
            <span class="units">
              <a id="celsius" href=""> ºC </a>
              |
              <a id="farhenheit" href=""> ºF </a>
            </span>
          </div>
          <div class="col location-time">
           **<div class="location" id="location-city">Sanlúcar de Barrameda</div>**
            <div class="date-time" id="date">Saturday 13:55</div>
            <div class="weather">Nice Weather</div>
          </div>
        </div>
        <div class="row three">
          <div class="col sat">
            Sat
            <div class="sat-icon">
              <i class="far fa-sun"></i>
            </div>
            <div class="sat-temp">
              <strong> 28º </strong>
              20º
            </div>
          </div>
          <div class="col sat">
            Sun
            <div class="sat-icon">
              <i class="fas fa-cloud-sun"></i>
            </div>
            <div class="sat-temp">
              <strong> 29º </strong>
              19º
            </div>
          </div>
          <div class="col sat">
            Mon
            <div class="sat-icon">
              <i class="fas fa-cloud-sun"></i>
            </div>
            <div class="sat-temp">
              <strong> 28º </strong>
              20º
            </div>
          </div>
          <div class="col sat">
            Tue
            <div class="sat-icon">
              <i class="fas fa-cloud-sun-rain"></i>
            </div>
            <div class="sat-temp">
              <strong> 28º </strong>
              18º
            </div>
          </div>
          <div class="col sat">
            Wed
            <div class="sat-icon">
              <i class="fas fa-cloud-sun"></i>
            </div>
            <div class="sat-temp">
              <strong> 26º </strong>
              18º
            </div>
          </div>
          <div class="col sat">
            Thu
            <div class="sat-icon">
              <i class="fas fa-umbrella-beach"></i>
            </div>
            <div class="sat-temp">
              <strong> 29º </strong>
              24º
            </div>
          </div>
          <div class="col sat">
            Fri
            <div class="sat-icon">
              <i class="fas fa-umbrella-beach"></i>
            </div>
            <div class="sat-temp">
              <strong> 30º </strong>
              22º
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

This is my JS code


let dateTime = document.querySelector("#date");
let currentTime = new Date();

let days = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];
let day = days[currentTime.getDay()];

let hours = currentTime.getHours();

let minutes = currentTime.getMinutes();

dateTime.innerHTML = `${day}, ${hours}:${minutes}`;

//Challenge 2

function search(event) {
  event.preventDefault();

  let enterCity = document.querySelector("#enter-city");
  let city = document.querySelector("#location-city");

  if (enterCity.value) {
    city.innerHTML = ` ${enterCity.value}`;
  }
}

let searchForm = document.querySelector("#form");

searchForm.addEventListener("submit", search);

//Challenge 3
function celsiusTemperature() {
  let temperature = document.querySelector("#temperature");

  temperature.innerHTML = `29`;
}

let cel = document.querySelector("#celsius");

cel.addEventListener("click", celsiusTemperature);

function farhenheitTemperature(event) {
  event.preventDefault();
  let temperature = document.querySelector("#temperature");

  temperature.innerHTML = `84`;
}

let far = document.querySelector("#farhenheit");

far.addEventListener("click", farhenheitTemperature);

your script run before the DOM is loaded, just put it at the end of the body — Greedo, Sep 08 '21 at 12:14

score 0 · Answer 1 · answered Sep 08 '21 at 12:16

0

The problem is that the script is executed before DOM is loaded.

You have 2 solutions for that:

put the script tag at bottom of the body tag
use DOMContentLoaded event or some similar event that is dispatched after the document is ready.

NOTE: It's always a good practice to put a script tag at the bottom of the body tag (performance issues)

answered Sep 08 '21 at 12:16

Nihad

50
7

Thank you, Nihad! Really helpful, just solved the issue and now it runs perfectly. Just learning to code and thought that the good practice was to have the ``` ``` in the of the html rather than just at the bottom. ``` – Anita Sep 08 '21 at 12:26
My pleasure, just keep rocking :) . – Nihad Sep 08 '21 at 12:30

Aaqib Javaid · Accepted Answer · 2021-10-06T00:24:24.753

0

Make sure the tag, containing the javascript is at the bottom of the <body> tag.

As long as the tag is below the element it's trying to find, the JavaScript should work.

However, if you don't want the at the bottom of your tag. Use defer in your <script src = "demo.js" defer></scripttag. (A script that will not run until after the page has loaded)

edited Oct 06 '21 at 00:24

answered Oct 06 '21 at 00:19

Aaqib Javaid

303
2
5

My javascript-code works perfectly on CodeSandbox but not on VisualStudio

2 Answers2