未捕获的 TypeError：无法设置 null 的属性（设置“innerHTML”）
Posted
技术标签:
【中文标题】未捕获的 TypeError：无法设置 null 的属性（设置“innerHTML”）【英文标题】：Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') 【发布时间】：2021-12-31 03:58:30 【问题描述】：倒计时不能出现在下面的网站上。
当我在这里输入代码时，结果是出现倒计时。
但我不知道为什么在我的浏览器（chrome 和 IE）中它没有出现，如上图所示为零。
请在此处找到代码： https://pastecode.io/s/sgkfae0y
谢谢。
let daysItem = document.querySelector("#days");
let hoursItem = document.querySelector("#hours");
let minItem = document.querySelector("#min");
let secItem = document.querySelector("#sec");
let countDown = () =>
let futureDate = new Date("17 Dec 2021");
let currentDate = new Date();
let myDate = futureDate - currentDate;
//console.log(myDate);
let days = Math.floor(myDate / 1000 / 60 / 60 / 24);
let hours = Math.floor(myDate / 1000 / 60 / 60) % 24;
let min = Math.floor(myDate / 1000 / 60) % 60;
let sec = Math.floor(myDate / 1000) % 60;
daysItem.innerhtml = days;
hoursItem.inneraHTML = hours;
minItem.innerHTML = min;
secItem.innerHTML = sec;
countDown()
setInterval(countDown, 1000)@import url('https://fonts.googleapis.com/css2?family=Handlee&family=Merienda&family=Nova+Oval&display=swap');
*
box-sizing: border-box;
body
font-family: 'Handlee', cursive;
text-align: center;
align-items: center;
position: relative;
justify-content: center;
h1
color: rgb(240, 51, 139);
font-family: 'Merienda', cursive;
.nama-mempelai
font-family: 'Nova Oval', cursive;
h2
color: grey;
p
font-size: 125%;
.container
display: absolute;
.countdown
margin: 60px auto 10px auto ;
.countdown-container
display: flex;
background-color: rgb(255, 155, 172);
color: white;
margin: 0 auto;
box-sizing: border-box;
.box-countdown
flex-grow: 1;
border: 2px solid rgb(250, 116, 138);
margin: 20px auto;
border-radius: 20px;
box-shadow: 0 2px 10px rgb(117, 117, 117, 0.5);
max-width: 150px;
display: block;
padding: auto 20px;
.big-text
font-size: 4rem;
.profil-mempelai
margin: 60px auto 10px auto ;
.profil-mempelai-container
display: flex;
color: rgb(7, 7, 7);
margin: 0 auto;
.box-profil
flex-grow: 1;
margin: 20px auto;
padding: 20px 50px ;
border: 2px solid rgb(168, 168, 168);
border-radius: 20px;
box-shadow: 0px 2px 10px 0px rgb(117, 117, 117, 0.5);
max-width: 300px;
min-width: 230px;
text-align: center;
height: auto;
.judul-section
margin: 20px;
footer
padding: 20px;
color: rgb(56, 55, 55);
background-color: #ff0ea3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<title>Nama kedua mempelai</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<script type="text/javascript" src="main.js"></script>
<div class="container">
<div class="top">
<h2>Wedding Invitation</h2>
<h1 class="nama-mempelai">Yestria & Bima</h1>
<h3>17 December 2021</h3>
<p class="ayat"><i>"Dan di antara tanda-tanda (Kebesaran)-Nya ialah Dia menciptakan pasangan-pasangan untukmu dari jenismu sendiri, agar kamu cenderung dan merasa tentram kepadanya dan Dia menjadikan di antaramu rasa kasih dan sayang. Sungguh pada yang demikian itu benar-benar terdapat tanda-tanda (Kebesaran Allah) bagi kaum yang berpikir."</i>
<br>(QS. Ar-Rum : 21)</p>
</div>
<div class="countdown">
<h1 class="judul-section">Countdown of Our Wedding</h1>
<div class="countdown-container">
<div class="box-countdown">
<div id="days" class="big-text">0</div>
<span>Days</span>
</div>
<div class="box-countdown">
<div id="hours" class="big-text">0</div>
<span>Hours</span>
</div>
<div class="box-countdown">
<div id="min" class="big-text">0</div>
<span>Minutes<span>
</div>
<div class="box-countdown">
<div id="sec"a class="big-text">0</div>
<span>Seconds</span>
</div>
</div>
</div>
<div class="profil-mempelai">
<h1>The Start of A New Journey</h1>
<div class="profil-mempelai-container">
<div class="box-profil">
<img src="akhwat.jpg" >
<h2 class="nama-mempelai-1">Yestria Yaswari</h2><p><b>Daughter of</b><br>Mr. Father & Mrs. Mother</p>
</div>
<div class="box-profil">
<img src="ikhwan.png" >
<h2 class="nama-mempelai-2">Bimo</h2><p><b>Son of</b><br>Mr. Father & Mrs. Mother</p>
</div>
</div>
</div>
<h1>Gallery</h1>
<div class="gallery">
</div>
<h1>Best Wishes for Yestria & Bimo</h1>
</div>
</body>
</html>【问题讨论】：
您需要添加minimal reproducible example（作为文本）以便我们为您提供帮助。 嗨，伊瓦。由于无法复制到此帖子，因此我已插入代码链接。请帮忙。 恐怕 Stack Overflow 不是这样工作的。看看How to Ask。代码应该是问题本身中的minimal reproducible example，而不是链接后面的文本。确保在此处也包含 HTML（包括此脚本插入页面的位置以及您引用的元素/标签），因为这与此处非常相关。 我尝试在此处插入代码，但出现错误“看起来您的帖子主要是代码；请添加更多详细信息。” 嗨，伊万。我已成功在此处插入代码。请检查我修改后的问题。谢谢。 【参考方案1】：hoursItem.inneraHTML肯定是不对的，你需要改成hoursItem.innerHTML。
错误消息告诉您，null 中没有innerHTML，因此您有一个未识别的变量，您打算引用其成员。这会导致错误。您的代码块似乎不包含实际错误的位置。
【讨论】：
以上是关于未捕获的 TypeError：无法设置 null 的属性（设置“innerHTML”）的主要内容，如果未能解决你的问题，请参考以下文章
语法中的 innerHTML 错误不起作用；未捕获的 TypeError：无法设置 null 的属性（设置“innerHTML”）[重复]
js 未捕获的 TypeError：无法读取 null 的属性“addEventListener”
Javascript：未捕获的 TypeError：无法读取 null 的属性“indexOf”
Vue 错误：未捕获（在承诺中）TypeError 无法读取 null 的属性（读取“地址”）