javascript - Onload 和 Onclick 在制作日历时在 Javascript 的 html 标记中显示“未捕获的 ReferenceError”？

问题描述

我正在尝试在其中创建一个日历Javascript，所以问题是html标签onload="RenderDate()"中的函数，如body标签中的函数未定义，而在js文件中，该函数已定义，并且onclick="moveDate('next')"显示 onlick="moveDate('prev')"与html文件中提到的RenderDate（）相同的pf问题。这些onclick 功能是或在几个月内移动上一个和下一个，但那没有发生

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>

标签： javascripthtmlcss

javascript - Onload 和 Onclick 在制作日历时在 Javascript 的 html 标记中显示“未捕获的 ReferenceError”？

问题描述

解决方案

推荐阅读