Hello friends i am getting Uncaught TypeError: document.getElementById(...) is null ,i think it's something with the parsing of types document.getElementById(dayOfWeek).appendChild(dayPTag);.It's supposed to visualize the month numbers.
There are simullar questions and they say that the problem is the element is still not created when it's executing or that really the var is null but not how to fixs it..here
How to fix..
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>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
