[ANSWERED] javascript – Problems creating js calendar

Question 1

If you fix your missing " in <div id="days-container"> the JavaScript runs.

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>

Question 2

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>

Bollate

[ANSWERED] javascript – Problems creating js calendar

By

Solution 1 :

Problem :

By

Related Post

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

[ANSWERED] html – How to include a clickable image behind a link

[ANSWERED] html – Move list item to the left in header/navigation menu

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate