创建 js 日历的问题答案

【问题标题】：Problems creating js calendar创建 js 日历的问题
【发布时间】：2021-04-12 14:15:49
【问题描述】：

朋友们你好，我收到了 Uncaught TypeError: document.getElementById(...) is null ，我认为它与类型 document.getElementById(dayOfWeek).appendChild(dayPTag); 的解析有关。它应该可视化月份数字。有类似的问题，他们说问题是元素在执行时仍未创建，或者 var 确实为 null 但不是如何修复它..here 如何解决..

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>

【问题讨论】：

标签： javascript html null calendar typeerror

【解决方案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>

【讨论】：