谷歌浏览器中错误提示：Cannot read property 'addEventListener' of undefined.

Question

我按照课程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">&lt;</a>'+
			'<a href="#" class="ui-datepicker-btn ui-datepicker-next-btn">&gt;</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);
	};
})();

以上是我的源码，虽然有些长。希望大大指教我一下...

Answer 1

你这代码好像没上完。。没看过那个课程，你看看是不是你上面贴的代码第67行： var $wrapper = document.createElement('div'); 这一句的锅，去掉 var 关键词试试：$wrapper = document.createElement('div');