Установка события из класса

[Beer75]

Добрый день!
Реализую простенький календарь под свои нужды. Сделал класс календаря, есть методы класса по отрисовки календаря в передаваемый снаружи div. Есть генерируемых стрелочки перехода на соседние месяцы. Есть метод перехода. Но как эти методы перехода привязать к кликам стрелочек изнутри класса? Мы ведь не знаем имени внешней переменной объекта созданного.
Можно сделать класс-обертку и объект календаря сделать глобальным. Но это кажется не совсем правильным решением.

Подскажите как правильно сделать функционал в этом случае?

[voraa]

Какой класс вы имеете в виду? class в javascript?

Мы ведь не знаем имени внешней переменной объекта созданного.

В классах для этого this есть.

[Beer75]

Мы же не можем, например на div, навесить OnClick="this.nextMonth();", снаружи this не привязан ни к чему. Если делать обертку, то можно создать глобальный объект и уже оберткой привязать к событию globalCalendar.addEventListener("click", globalObject.nextMonth). А хочется к генерируемой DOM-разметке привязать внутренний метод.

[ksa]

Beer75, пока ты не начнешь делать тестовые примеры - дело не сдвинется с места.
Ты все про Фому... А тебе про Ерему.

[voraa]

Мы же не можем, например на div, навесить OnClick="this.nextMonth();", снаружи this не привязан ни к чему.

Так, как я понял, обработчик должен назначаться внутри класса, а не снаружи.
Хотя, не видя ваше класса и остального кода ничего сказать нельзя.

[Beer75]

Ок. Код. =о)

calendar.html
...
<div id="myCalendar_div"></div>
...
<script>
function onLoad(){
myCalendar=new myCalendar();
myCalendar.renderCalendar('myCcalendar_div');
}
</script>

myCalendar.js

class MyCalendar{
outputDiv=null;

constructor(){
// вычисляем текущую дату, необходимые параметры

}

renderCalendar(oDiv){

this.outputDiv=document.querySelector("#"+oDiv);
// вывод сетки календаря
...
// вывод двух ссылок, на следующий месяц и предыдущий
this.outputDiv.innerHTML=this.outputDiv.innerHTML+ '<span id="prevMonth">пред</span><span id="nextMonth">след</span>';
}

nextMonth(){
// вычисляем необходимые параметры
this.renderCalendar();

}

prevMonth(){
// вычисляем необходимые параметры
this.renderCalendar();

}


}

Вопрос: можно ли внутри функции renderCalendar повесить на span обработчики с вызовом nextMonth() и prevMonth()?

Если ставить this.nextMonth(), то ошибка, естественно. А название переменной myCalendar, определяемой в onLoad() недоступно внутри класса.

Или я что-то не так делаю в принципе?

[ksa]

Вопрос: можно ли внутри функции renderCalendar повесить на span обработчики с вызовом nextMonth() и prevMonth()?

Разумеется можно.

Вот только вся "логика" и ее реализация у тебя весьма неудачные...

[ksa]

Beer75,если немного переделать твои фантазии

<div id="myCalendar_div"></div>


<script>

class MyCalendar {
	outputDiv = null;
	constructor(oDiv){
		// вычисляем текущую дату, необходимые параметры
		this.outputDiv = document.querySelector("#"+oDiv);
	}
	renderCalendar(){
		// вывод сетки календаря
		// вывод двух ссылок, на следующий месяц и предыдущий
		this.outputDiv.innerHTML = '<span id="prevMonth">пред</span> <span id="nextMonth">след</span>';
		prevMonth.addEventListener('click', e => this.prevMonth())
		nextMonth.addEventListener('click', e => this.nextMonth())
	}
	nextMonth(){
		alert('nextMonth')
		// вычисляем необходимые параметры
		this.renderCalendar();

	}
	prevMonth(){
		alert('prevMonth')
		// вычисляем необходимые параметры
		this.renderCalendar();

	}
}
//
function onLoad(){
	const o = new MyCalendar('myCalendar_div');
	o.renderCalendar();
}

onLoad()


</script>

[Beer75]

Разумеется можно.

Вот только вся "логика" и ее реализация у тебя весьма неудачные...

А как сделать удачные?

[Beer75]

ksa, спасибо!
понял, в чем была моя ошибка. Пытался запихать обработчик в параметр тэга onClick="". Учусь, торможу. =о)