我正在尝试使用OOP原则构建一个简单的toDo应用。我正在使用“ this”遇到各种问题,并尝试在其他方法中引用方法。我已经阅读了尽可能多的内容,并且没有遇到任何与我自己相似的情况,因此我可以应用它们,因此我认为我应该发布代码并寻求指导。我是编码和Java语言的新手。
这是两个方法:目前,handleCheckTime()方法中的代码只是将某些内容记录到控制台以测试我是否可以使其正常工作。该类非常大,因此我没有从中发布所有代码,但是如果需要可以理解该问题,我可以。
handleCheckTime() {
let todaysDate = new Date();
let seconds = todaysDate.getSeconds();
let minutes = todaysDate.getMinutes();
let hours = todaysDate.getHours();
let bigTime = todaysDate.toISOString().substring(0, 10);
this.checkTimer = setInterval(() => {
console.log(seconds);
}, 1000);
}
toggleAlarm(event) {
let alarmToggleOff = `url('images/alarm-row-off.svg') no-repeat`;
let alarmToggleOn = `url('images/alarm-row-on.svg') no-repeat`;
let inputDate = event.target.previousElementSibling.previousElementSibling;
let inputTime = event.target.previousElementSibling;
if (event.target.style.background.includes('on')) {
event.target.style.background = alarmToggleOff;
inputDate.disabled = true;
inputTime.disabled = true;
} else {
event.target.style.background = alarmToggleOn;
inputDate.disabled = false;
inputTime.disabled = false;
this.handleCheckTime();
/*Error at this point: Uncaught TypeError: this.handleCheckTime is not a function at HTMLDivElement.toggleAlarm */
}
}
编辑:这是分配事件处理程序的appendRow方法。
appendRow() {
const taskSupers = document.querySelectorAll('.task-super');
let newDiv = document.createElement('div');
newDiv.classList.add('task-super');
newDiv.innerHTML = this.taskSuper;
toDoContainer.appendChild(newDiv);
newDiv.classList.add(`${taskSupers.length}`);
let thisCircle = newDiv.querySelector('.circle');
let thisInfo = newDiv.querySelector('.info');
let thisAlarm = newDiv.querySelector('.alarm');
let thisDelete = newDiv.querySelector('.delete');
let thisInput = newDiv.querySelector('.input');
let thisAlarmToggle = newDiv.querySelector('.alarm-row-toggle');
let inputDate = newDiv.querySelector('.date');
let inputTime = newDiv.querySelector('.time');
thisCircle.addEventListener('click', this.handleCircle);
thisInfo.addEventListener('click', this.handleInfo);
thisAlarm.addEventListener('click', this.handleAlarm);
thisDelete.addEventListener('click', this.handleDelete);
thisInput.addEventListener('keydown', this.useEnter);
thisInput.addEventListener('blur', this.handleNewRow);
thisAlarmToggle.addEventListener('click', this.toggleAlarm);
inputDate.disabled = true;
inputTime.disabled = true;
thisAlarmToggle.style.background = `url(images/alarm-row-off.svg) no-repeat`;
}
下面希望您能使用此方法。您不是从另一个调用方法。您从事件处理程序调用时,“此”指的是事件
handleCheckTime() {
let todaysDate = new Date();
let seconds = todaysDate.getSeconds();
let minutes = todaysDate.getMinutes();
let hours = todaysDate.getHours();
let bigTime = todaysDate.toISOString().substring(0, 10);
this.checkTimer = setInterval(() => {
console.log(seconds);
}, 1000);
}
var self = this;
toggleAlarm(event) {
let alarmToggleOff = `url('images/alarm-row-off.svg') no-repeat`;
let alarmToggleOn = `url('images/alarm-row-on.svg') no-repeat`;
let inputDate = event.target.previousElementSibling.previousElementSibling;
let inputTime = event.target.previousElementSibling;
if (event.target.style.background.includes('on')) {
event.target.style.background = alarmToggleOff;
inputDate.disabled = true;
inputTime.disabled = true;
} else {
event.target.style.background = alarmToggleOn;
inputDate.disabled = false;
inputTime.disabled = false;
self.handleCheckTime();
}
}