我按照課程Datapicker組件開發，一行一行的敲代碼。其中第五章節的第二小節，我再加入一個addEventListener的時候，瀏覽器報錯。報錯在第95行，但是在80行同樣有addEventListener，卻沒有報錯。(function(){
var?datepicker?=?window.datepicker;
var?monthData;
var?$wrapper;
datepicker.buildUi?=?function(year,?month){
monthData?=?datepicker.getMonthData(year,?month);
var?html?=?'<div?class="ui-datepicker-header">'+
'<a?href="#"?class="ui-datepicker-btn?ui-datepicker-prev-btn"><</a>'+
'<a?href="#"?class="ui-datepicker-btn?ui-datepicker-next-btn">></a>'+
'<span?class="ui-datepicker-curr-month">'?+?monthData.year?+?'-'?+?monthData.month?+?'</span>'+
'</div>'+
'<div?class="ui-datepicker-body">'+
'<table>'+
'<thead>'+
'<tr>'+
'<th>一</th>'+
'<th>二</th>'+
'<th>三</th>'+
'<th>四</th>'+
'<th>五</th>'+
'<th>六</th>'+
'<th>日</th>'+
'</tr>'+
'</thead>'+
'<tbody>';
for(var?i?=?0?;i<monthData.days.length;?i++){
var?date?=?monthData.days[i];
if?(i%7?===?0)?{
html?+=?'<tr>';
}
html?+=?'<td>'?+?date.showDate?+?'</td>'
if(i&7?===?6){
html?+=?'</tr>'
}
}
html+=?'</tbody>'+
'</table>'+
'</div>';
return?html;
};
datepicker.render?=?function(direction){
var?year,month;
if(monthData){
year?=?monthData.year;
month?=?monthData.month;
}
if(direction?===?'prev')?month--;
if(direction?===?'next')?month++;
var?html?=?datepicker.buildUi(year,?month);
if?(!$wrapper)?{
var?$wrapper?=?document.createElement('div');
$wrapper.className?=?'ui-datepicker-wrapper';
document.body.appendChild($wrapper);
}
$wrapper.innerHTML?=?html;
}
datepicker.init?=?function(input){
datepicker.render();
var?$input?=?document.querySelector(input);
var?isOpen?=?false;
$input.addEventListener('click',function(){
if(isOpen){
$wrapper.classList.remove('ui-datepicker-wrapper-show');
isOpen?=?false;
}else{
$wrapper.classList.add('ui-datepicker-wrapper-show');
var?left?=?$input.offsetLeft;
var?top?=?$input.offsetTop;
var?height?=?$input.offsetHeight;
$wrapper.style.top?=?top?+?height?+?2?+?'px';
$wrapper.style.left?=?left?+?'px';
isOpen?=?true;
}
},false);
$wrapper.addEventListener('click',?function(e){
var?$target?=?e.target;
if(!$target.classList.contains('ui-datepicker-btn'))?return?;
if($target.classList.contains('ui-datepicker-prev-btn')){
datepicker.render('prev');
}else?if($target.classList.contains('ui-datepicker-next-btn')){
datepicker.render('next');
}
},?false);
};
})();以上是我的源碼，雖然有些長。希望大大指教我一下...
谷歌瀏覽器中錯誤提示：Cannot read property 'addEventListener' of undefined.
再雨
2017-06-04 13:19:14
