Here's an error that has been plaguing me every time I try to add a function from within an onclick. It happens for seemingly no reason. Here is the code:
Code:
export class Clickables {
constructor(game) {
this.game = game;
this.doOnce = false;
this.textDisplaying = false;
this.ladder = document.getElementById("ladder");
this.steering = document.getElementById("steering");
this.propellor = document.getElementById("propellor");
this.outAtSea = document.getElementById("outAtSea");
this.atTheShip = document.getElementById("atTheShip");
this.ladderMSG = document.getElementById("ladderMSG");
this.steeringMSG = document.getElementById("steeringMSG");
this.propellorMSG = document.getElementById("propellorMSG");
this.outAtSeaMSG = document.getElementById("outAtSeaMSG");
this.atTheShipMSG = document.getElementById("atTheShipMSG");
this.eventRect = document.getElementById("eventRect");
//an array holding all the clickables
this.clickables = [this.ladder, this.steering, this.propellor,
this.outAtSea, this.atTheShip];
//an array holding all the messages
this.messages = [this.ladderMSG, this.steeringMSG, this.propellorMSG,
this.outAtSeaMSG, this.atTheShipMSG];
}
//NOTE:
//may want tp read text one char at a time for aesthetics
//may want to fade out text for aesthetics
displayText(message) {
//prevent the messages from being clicked again
this.eventRect.style.display = "none";
//display the given message
message.style.display = "flex";
if (this.textDisplaying) {
this.textDisplaying = false; //do only once
//setTimeout does a thing after set amount of time
setTimeout(() => {
//allow the text boxes to be clicked again
this.eventRect.style.display = "initial";
//remove the given message
message.style.display = "none";
}, 5000);
} //if(this.textDisplaying)
} //displayText()
update(startButtonPressed) {
if (startButtonPressed && !this.doOnce) {
this.doOnce = true;
for (let i = 0; i < this.clickables.length; i++) {
let self = this.clickables[i];
self.addEventListener('click', function (event) {
event.preventDefault();
//do awesome stuff here
if (this.id === 'ladder') {
//stuff to do if LADDER is clicked
displayText(messages[0]);
} else if (this.id === 'steering') {
//stuff to do if STEERING is clicked
displayText(messages[1]);
} else if (this.id === 'propellor') {
//stuff to do if PROPELLOR is clicked
displayText(messages[2]);
} else if (this.id === 'outAtSea') {
//stuff to do if OUTATSEA is clicked
displayText(messages[3]);
} else if (this.id === 'atTheShip') {
//stuff to do if ATTHESHIP is clicked
displayText(messages[4]);
}
}, false);
} //for()
} //if(startButtonPressed)
} //update()
draw(context) {}
} //class Clickables
