Javascript 为什么我的foor循环给我创建的变量赋值为null？
我试着把我的待办事项和日历联系起来。我在我所有的日历表中循环，然后在我的TODO数组中循环 然后它应该加上一个圆圈，里面有countTodo，这表示我那天有多少todo 但是当我在我的第一个IF语句“uncaughttypeerror:cannotreadproperty'innerText'of null”中遇到一个错误 我已检查，我的“tds[j]”为空。我不知道为什么，也不知道如何修复它Javascript 为什么我的foor循环给我创建的变量赋值为null？,javascript,arrays,for-loop,null,Javascript,Arrays,For Loop,Null,我试着把我的待办事项和日历联系起来。我在我所有的日历表中循环，然后在我的TODO数组中循环 然后它应该加上一个圆圈，里面有countTodo，这表示我那天有多少todo 但是当我在我的第一个IF语句“uncaughttypeerror:cannotreadproperty'innerText'of null”中遇到一个错误 我已检查，我的“tds[j]”为空。我不知道为什么，也不知道如何修复它 function checkArrayWithCalendar() { let tds = d
function checkArrayWithCalendar() {
let tds = document.querySelectorAll("td")
for (let j = 0; j < tds.length; j++) {
let secondDivInCalendar = tds[j].querySelector("#todoInCalendar")
let countTodo = 0
for (let i = 0; i < todos.length; i++) {
if (tds[j].firstElementChild.innerText == todos[i].date) {
countTodo++
}
}
if (countTodo > 0) {
if (!secondDivInCalendar) {
secondDivInCalendar = document.createElement("div")
secondDivInCalendar.id = "todoInCalendar"
tds[j].appendChild(secondDivInCalendar)
let spanForArray = document.createElement("span")
spanForArray.classList = "spanForArray"
secondDivInCalendar.appendChild(spanForArray)
}
secondDivInCalendar.firstElementChild.innerText = countTodo
}
}
}
函数checkArrayWithCalendar（）{
设tds=document.querySelectorAll（“td”）
对于（设j=0；j0）{
如果（！日历）{
SecondDivingCalendar=document.createElement（“div”）
secondDivingCalendar.id=“todoInCalendar”
tds[j].附加子项（第二日历）
设spanForArray=document.createElement（“span”）
spanForArray.classList=“spanForArray”
第二个日历。附加子对象（spanForArray）
}
SecondDivingCalendar.firstElementChild.innerText=countTodo
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<script src="https://kit.fontawesome.com/edc24130b8.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
</script>
<link rel="stylesheet" media="screen and (min-width:75.43em)" href="stylesheet/style.css">
<link rel="stylesheet" media="screen and (min-width:49.5em) and (max-width:75.43em)" href="stylesheet/tablet.css">
<link rel="stylesheet" media="screen and (max-width:49.5em)" href="stylesheet/mobile.css">
<title>TODO</title>
</head>
<body>
<div class="content-wrapper">
<div class="todo-wrapper">
<div class="header"><img src="Title2.png" alt="title" srcset=""></div>
<div class="todo-title">
<h1 id="day"></h1>
<h4 id="Time"></h4>
<h4 id="dateOfToday"></h4>
</div>
<div class="todo-list-wrapper">
<div class="inputAndButton">
<input type="text" id="input" placeholder="Vad är på din agenda?">
<select name="date" id="Date">
<option value="">Date:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<i id="add-icon" class="fas fa-plus"></i>
</div>
<div class="todoList">
<ul id="listForAllTodos">
</ul>
</div>
</div>
</div>
<div id="hej">
<div class="card">
<h2 class="card-header" id="monthAndYear"></h2>
<table class="table table-bordered table-responsive-sm" id="calendar">
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody id="calendar-body">
</tbody>
</table>
<div class="form-inline">
<button class="btn btn-outline-primary col-sm-6" id="previous"
onclick="previous()">Previous</button>
<button class="btn btn-outline-primary col-sm-6" id="next" onclick="next()">Next</button>
</div>
<form class="form-inline">
<label class="lead mr-2 ml-2" for="month">Jump To: </label>
<select class="form-control col-sm-4" name="month" id="month" onchange="jump()">
<option value=0>Jan</option>
<option value=1>Feb</option>
<option value=2>Mar</option>
<option value=3>Apr</option>
<option value=4>May</option>
<option value=5>Jun</option>
<option value=6>Jul</option>
<option value=7>Aug</option>
<option value=8>Sep</option>
<option value=9>Oct</option>
<option value=10>Nov</option>
<option value=11>Dec</option>
</select>
<label for="year"></label><select class="form-control col-sm-4" name="year" id="year"
onchange="jump()">
<option value=1990>1990</option>
<option value=1991>1991</option>
<option value=1992>1992</option>
<option value=1993>1993</option>
<option value=1994>1994</option>
<option value=1995>1995</option>
<option value=1996>1996</option>
<option value=1997>1997</option>
<option value=1998>1998</option>
<option value=1999>1999</option>
<option value=2000>2000</option>
<option value=2001>2001</option>
<option value=2002>2002</option>
<option value=2003>2003</option>
<option value=2004>2004</option>
<option value=2005>2005</option>
<option value=2006>2006</option>
<option value=2007>2007</option>
<option value=2008>2008</option>
<option value=2009>2009</option>
<option value=2010>2010</option>
<option value=2011>2011</option>
<option value=2012>2012</option>
<option value=2013>2013</option>
<option value=2014>2014</option>
<option value=2015>2015</option>
<option value=2016>2016</option>
<option value=2017>2017</option>
<option value=2018>2018</option>
<option value=2019>2019</option>
<option value=2020>2020</option>
<option value=2021>2021</option>
<option value=2022>2022</option>
<option value=2023>2023</option>
<option value=2024>2024</option>
<option value=2025>2025</option>
<option value=2026>2026</option>
<option value=2027>2027</option>
<option value=2028>2028</option>
<option value=2029>2029</option>
<option value=2030>2030</option>
</select>
</form>
</div>
</div>
<script src="main.js"></script>
<script src="todo.js" defer></script>
<script src="calendar.js" defer></script>
</div>
</body>
</html>
待办事项
日期：
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
太阳
周一
星期二
结婚
清华大学
星期五
坐
以前的
下一个
跳转到：
简
二月
破坏
四月
也许
六月
七月
八月
九月
十月
十一月
12月
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
文档。querySelectorAll（“td”）tdthlet tds=document.querySelectorAll（“th”）console.log（tds[j]）tds[0]if（tds[j].firstElementChild！=null）{for（let i=0；i