我的 javascript-代码在 CodeSandbox 上运行良好，但在 VisualStudio 上运行不正常

Question

所以我在 VS 代码中创建了一个文件夹，里面有 HTML、JS 和 CSS 文件，当我在浏览器中打开它时，它在控制台中给我这个错误：

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

dateTime.innerHTML = ${天}，${小时}:${分钟};

None 的 JS 似乎可以在 VS 代码上运行，但是当我将完全相同的代码复制到代码沙箱时，它可以完美运行。

如果有人能帮我解决这个问题，我将不胜感激。

提前致谢！ :)

*脚本标签可以很好地链接到 html，因为如果我 alert("Hello") 使用 VSCode.

时在浏览器中出现弹出窗口

这是我的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>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>

这是我的JS代码


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);

Answer 1

问题是脚本在加载 DOM 之前执行。

你有 2 个解决方案：

将脚本标签放在正文标签的底部
使用 DOMContentLoaded 事件或文档准备就绪后调度的一些类似事件。

注意：将脚本标签放在正文标签的底部（性能问题）始终是一个好习惯

Answer 2

确保包含 javascript 的标签位于 <body> 标签的底部。

只要标签位于其尝试的元素下方发现，JavaScript 应该有效。

但是，如果您不希望位于标签底部。在您的 <script src = "demo.js" defer></script 标签中使用延迟。（在页面加载后才会运行的脚本）

我的 javascript-代码在 CodeSandbox 上运行良好，但在 VisualStudio 上运行不正常

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

html

javascript

visual-studio

codesandbox