Onload and Onclick are showing "Uncaught ReferenceError" in html tags in Javascript while making calandar?

I am trying to create a calender in Javascript, so the issue is functions in html tags like onload="RenderDate()" in body tag is undefined whereas in js file the function is defined ,Also onclick="moveDate('next')" and onlick="moveDate('prev')"showing same kind pf issue like the RenderDate() mentioned in html file .these onclick functions are or moving previous and next on months but thats not happening

var dt = new Date () ; function RenderDate () { var dt = new Date () ; dt.setDate(1);  var day = dt.getDay();   var endDate =  new Date (dt.getFullYear,dt.getMonth() + 1, 0).getDate();   var prevDate = new Date (dt.getFullYear, dt.getMonth(), 0).getDate();  var today = new Date ().getDate(); console.log(today);  var months = ["January",  'Feburary', 'March',  'April', 'May','June',  'July', 'August', 'September',  'October', 'November', 'Decemebr'];    document.getElementById('date_str').innerHTML = dt.toDateString(); document.getElementById('month').innerHTML = months[dt.getMonth()];  var cells = "";   for (x = day; x > 0; x--) {     cells += "<div class='pre_date'>" + (prevDate - x + 1) + "</div>"; }  for (i = 1; i <= endDate; i++) {     if(i== today){         cells += "<div class='today'>" + i + " </div>";     }else{         cells += "<div" + i + " </div>";     } }  document.getElementsByClassName( "days" )[0].innerHTML = cells;  }   function moveDate(para) {   if(para=='prev'){      dt.setMonth(dt.getMonth-1);      RenderDate();  }     }
body{     margin: 0;     font-family:sans-serif;  } *{     margin: 0;     box-sizing: border-box;  } .wrapper{     width: 100%;     height: 100vh;     background-color: #dfe6df;     display: flex;     justify-content: center;     align-items: center; }  .calander{          width: 600px;     background-color: white;     height: 400px;     box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.2); } .month{     display:flex;     justify-content: space-between;     width:100%;     text-align: center;     background-color:#1554B3;     color:#fff;     padding: 40px 30px; } .weekends{     background-color:#154EA4;     display: flex;     color:white;     padding:7px 0;  } .weekends div{     width:14.28%;     text-align: center; } .days{     display: flex;     flex-wrap: wrap;     text-align: center;      font-weight: 300;     padding: 10px 0; }  .days div{     width:14.28%;     margin-bottom: 10px;     padding:10px 0;     transition: all 0.4s; }  .days div:hover{     background-color:#dfe6e9;  } .today{     background-color:#3895D3;     color:#fff;  }
<html>     <head>         <title> Calendar</title>          <!-- include calandar css-->         <link rel = "stylesheet"  href = "css/calender.css">                  <!-- include calandar jss link-->         <script  type="text/javascript" >src = 'js/calander.js'</script>      </head>     <body onload = "RenderDate()">     <div class ="wrapper">         <div class ='calander'>              <div class = 'month'>                  <div class = 'prev' onclick="moveDate('prev')">                      <span>&#10094</span>                 </div>                                 <div>                     <h2 id ='month'>September</h2>                     <p id ='date_str'></p>                 </div>                                 <div class ='next' onclick="moveDate('next')">                     <span>&#10095</span>                 </div>             </div>                          <div class = 'weekends'>                 <div>Sun</div>                 <div>Mon</div>                 <div>Tue</div>                 <div>Wed</div>                 <div>Thu</div>                 <div>fri</div>                 <div>Sat</div>              </div>             <div class = 'days'>                                  <div>30</div>                 <div>31</div>                 <div class='today'>1</div>                 <div >2</div>                 <div>3</div>                 <div>4</div>                 <div>5</div>                 <div >6</div>                 <div>7</div>                 <div>8</div>                 <div>9</div>                 <div>10</div>                 <div>11</div>                 <div>12</div>                 <div>13</div>                 <div>14</div>                 <div>15</div>                 <div>16</div>                 <div>17</div>                 <div>18</div>                 <div>19</div>                 <div>20</div>                 <div>21</div>                 <div>22</div>                 <div>23</div>                 <div>24</div>                 <div>25</div>                 <div>26</div>                 <div>27</div>                 <div>28</div>                 <div>29</div>                 <div>30</div>                                                 </div>          </div>     </div>                                                                                                   </body> </html>

Asked on September 1, 2020 in CSS.
Add Comment
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.