Solution 1 :

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) 

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?

Solution 2 :

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 🙂

Problem :

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 () {

    cellBody () {
        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.stroke ()

        if (this.opened === true) {
            if (this.hasMine === true) {
             c.ellipse(this.x + this.w/2, this.y + this.w/2, 10, 10, 15,0,Math.PI*2,false);

    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

// works fine here

// 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

    // works fine here


Comment posted by Dave Newton

Define “doesn’t work”. Likely a binding issue since JS binds

Comment posted by epascarello

Where is this click being called from in the code?

Comment posted by Harry

@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

Comment posted by Harry

@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)

Comment posted by Dave Newton

Define “doesn’t work”. Is there an error in the console? Related to

Comment posted by Harry

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…