canvas.addEventListener add an anonymous function to be called onclick
You should assign a variable to table[0][0] outside if you want to call it inside that function.
const tb = table[0][0];
canvas.addEventListener('click', function (event)
{
tb.open();
tb.squareTest();
}
);
This way you will have a reference to that table to be used inside your onclick function;
This is assuming you have a console error that says table[0][0] is undefined. Is this the case?
There was no error in the code….
But I was not getting the desired output because there was another function which was not called with the open()
Thanks everyone 🙂
All methods in the class above are working fine if a call them.
But when I call them with addEventListener(Click), the object method open() does not work but other methods work here also.
Kindly help me find where have I made the error?
class Cell {
constructor (x,y) {
this.x = x
this.y = y
this.w = cellWidth
this.h = cellHeight
this.opened = false
this.hasMine = true
}
squareTest () {
c.beginPath()
c.rect(100,100,100,100)
c.stroke()
}
cellBody () {
c.beginPath()
c.fillStyle = "rgba(0, 100, 100, 0.1)"
c.strokeStyle = "rgba(0, 100, 100, 1)"
c.rect (this.x, this.y, this.w, this.h)
c.fill()
c.stroke ()
if (this.opened === true) {
if (this.hasMine === true) {
c.beginPath();
c.ellipse(this.x + this.w/2, this.y + this.w/2, 10, 10, 15,0,Math.PI*2,false);
c.stroke()
}
}
}
open () {
if(this.opened == false) {this.opened = true}
}
}
}
// I have removed some code here to make this post short.
// open() function works fine without addEventListener(Click),
// But other methods work well anywhere, so what is different with open() ?
// table [0][0] is the object of the Class Cell
table[0][0].open();
// works fine here
table[0][0].squareTest();
// works fine here
canvas.addEventListener ('click', function (event)
{
table[0][0].open(); // DOES NOT WORK HERE
table[0][0].squareTest(); //works fine here
console.log (table[1][1]); //works fine
}
)
table[0][0].open();
// works fine here
Define “doesn’t work”. Likely a binding issue since JS binds
@DaveNewton open() function has been given a task to do something, when I type table[0][0].open() without eventlistener Click it performs the task. With eventlistener Click, table[0][0].squareTest performs it task but table[0][0].squareTest does not perform its function. If I am still not able to explain the issue, I can share my complete sheet. It conatains less than 200 lines
@epascarello In the real sheet the click was on a specific area. But to find my error, I simplified my code with a click anywhere on the canvas. In this simplified code also all other table[0][0]functions are performed are working except table[0][0].open(), and the strange thing is that table[0][0] also works well without eventlistener. I can share my sheet if required (under 200 lines)
Define “doesn’t work”. Is there an error in the console? Related to
This does not seems to be the case. As I have declared the Table array independently as var table and pushed elements with for loop. Also, if I write the eventListener “console.log(table[0][0]” It logs the correct value on the console. To me it seems table[0][0] is accessible…