所以我在VS code中创建了一个带有HTML, JS和CSS文件的文件夹，当我在浏览器中打开它时，它在控制台上给了我这个错误:
script.js:21 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at script.js:21
dateTime.innerHTML =${day}， ${hours}:${minutes};
所有的JS似乎都不能在VS代码上工作，但是当我将完全相同的代码复制到代码沙箱时，它可以完美地工作。
如果有人能帮我解决这个问题，我将非常感激。
提前感谢!:)
*脚本标签是ok链接到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);
确保包含javascript的标签位于<body>标签的底部。
只要标签在元素下面，它就会尝试
然而，如果你不想在你的标签的底部。在<script src = "demo.js" defer></script标记中使用defer。(在页面加载完成后才运行的脚本)
问题是脚本是在加载DOM之前执行的。
你有两个解决方案:
- 将script标签放在body标签的底部
- 使用DOMContentLoaded事件或一些类似的事件，在文档准备好后分发。
注意:在body标签的底部放置script标签总是一个很好的做法(性能问题)