创建js日历的问题

Question

你好朋友，我收到未捕获的类型错误：document.getElementById(...) is null，我认为这是解析类型 document.getElementById(dayOfWeek).appendChild(dayPTag); 的问题。它应该可视化月份数字。有类似的问题，他们说问题是元素在执行时仍然没有创建，或者实际上 var 是 null 但不知道如何修复它.. 如何修复..

let yearChosen=new Date().getFullYear();
let monthChosen=new Date().getMonth();                                   
let months=["January","February","March","April","May",
"June","Jully","August","September","Octomber","November","December"];



function getNumberOfDays(year,month){                        
                                                               
let numDays=new Date(year,month+1,0).getDate();
return numDays;

}

function renderCal(getNumDays){                     
let yearPTag=document.getElementById("year");
yearPTag.innerText=yearChosen;
let monthName=months[monthChosen];                    

let monthPTag=document.getElementById("month");
monthPTag.innerText=monthName;

for(i=1;i<=getNumDays; i++){
   let dayPTag=document.createElement("p");
   let dayText=document.createTextNode(i.toString()); 
   dayPTag.appendChild(dayText);
   let date=monthName+""+i.toString()+","+yearChosen; 
   
   let dayOfWeek=new Date(date).getDay();
   
 document.getElementById(dayOfWeek).appendChild(dayPTag);


   
   }
}

renderCal(getNumberOfDays(yearChosen,monthChosen));

#cal-container{

width:300px;
height:500px;
border:1px solid black;
margin:400px;
margin-left:500px;

}

#cal-header{

display:flex;
justify-content:space-around;

}

p{
  display:inline;
}

<head>
<title>Calendar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale-1.0">

</head>


<body>


<div id="cal-container">

<div id="cal-header">

<div>
<i><</i>
<p id="month"></p>
<i>></i>
</div>
<div>
<i><</i>
<p id="year"></p>
<i>></i>
</div>

</div>

<div id="days-container>

<div id="0" class="days-column"></div>
<div id="1" class="days-column"></div>
<div id="2" class="days-column"></div>
<div id="3" class="days-column"></div>
<div id="4" class="days-column"></div>
<div id="5" class="days-column"></div>
<div id="6" class="days-column"></div>

</div>

</div>

</body>

Answer 1

如果您在 <div id="days-container"> 中修复缺失的 "，JavaScript 就会运行。

let yearChosen=new Date().getFullYear();
let monthChosen=new Date().getMonth();                                   
let months=["January","February","March","April","May",
"June","Jully","August","September","Octomber","November","December"];



function getNumberOfDays(year,month) {                         
    let numDays=new Date(year,month+1,0).getDate();
    return numDays;
}

function renderCal(getNumDays) {                     
    let yearPTag=document.getElementById("year");
    yearPTag.innerText=yearChosen;
    let monthName=months[monthChosen];                    

    let monthPTag=document.getElementById("month");
    monthPTag.innerText=monthName;

for(i=1;i<=getNumDays; i++) {
   let dayPTag=document.createElement("p");
   let dayText=document.createTextNode(i.toString()); 
   dayPTag.appendChild(dayText);
   let date=monthName+""+i.toString()+","+yearChosen; 
   
   let dayOfWeek=new Date(date).getDay();
   
   document.getElementById(dayOfWeek).appendChild(dayPTag);
   }
}

renderCal(getNumberOfDays(yearChosen,monthChosen));

#cal-container{

width:300px;
height:500px;
border:1px solid black;
margin:400px;
margin-left:500px;

}

#cal-header{

display:flex;
justify-content:space-around;

}

p{
  display:inline;
}

<head>
<title>Calendar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale-1.0">

</head>


<body>


<div id="cal-container">

<div id="cal-header">

<div>
<i><</i>
<p id="month"></p>
<i>></i>
</div>
<div>
<i><</i>
<p id="year"></p>
<i>></i>
</div>

</div>

<div id="days-container">

<div id="0" class="days-column"></div>
<div id="1" class="days-column"></div>
<div id="2" class="days-column"></div>
<div id="3" class="days-column"></div>
<div id="4" class="days-column"></div>
<div id="5" class="days-column"></div>
<div id="6" class="days-column"></div>

</div>

</div>

</body>

创建js日历的问题

Problems creating js calendar

html

javascript

null

calendar

typeerror