Accessing a table cell object instead of img

Question

I'm trying to access the object behind the click in the console, it return the image instead, and I want to alter that object properties which makes it impossible, how do I access the object itself and not the image sitting on it?

For example if I type in the console gBoard[0][0] it return the image itself(aka TILE), I want to access the cell object that's behind it.

I would appreciate an explanation and a proper console log for it.

const TILE ='<img src="/img/tile.png" >'


function cellClicked(elCell, i, j) {
    // if (!gGameInterval) return;
    console.log('Click', i, j);
    // debugger
    if(gBoard[i][j].isBomb===true){
        gBoard[i][j].isFlagged=true
        elCell.innerHTML=TWO
    }
}


function printMat(mat, selector) {
    var strHTML = '<table border="1"><tbody>';
    for (var i = 0; i < mat.length; i++) {
        strHTML += '<tr>';
        for (var j = 0; j < mat[0].length; j++) {
            var cell = mat[i][j]=TILE
            var className = `cell-${i}-${j}`
            strHTML +=
                `<td class="${className}" 
              onclick="cellClicked(this, ${i}, ${j})">
                ${cell} 
            </td>`
        }
        strHTML += '</tr>'
    }
    strHTML += '</tbody></table>';
    var elContainer = document.querySelector(selector);
    elContainer.innerHTML = strHTML;
}




function createBoard(size) {
    var board = []
    for (var i = 0; i < size; i++) {
        board[i] = []
        for (var j = 0; j < size; j++) {
            board[i][j] = creatCell()
        }
    }
    return board
}


function creatCell() {
    return {
        isBomb: false,
        isFlagged: false,
        isClicked: false,
        isOpen: false
    }
}

I think we are missing some of your code -- specifically your `cellClicked` event. Plus you mentioned getting a reference to the image in the Cell, but I don't see anything in your code sample that places an images into the table. Seeing these additional pieces of code would help us to better diagnose your problem. — willman, Jan 21 '20 at 21:45
i added the function but its irrelevant since right now its not doing anything, i want to access the object doesnt matter if its clicked or not, via the console, havent yet written the rest of the code — AntiMAtter33, Jan 21 '20 at 21:50
Does this answer your question? [What is event bubbling and capturing?](https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing) — Caleb Anthony, Jan 21 '20 at 21:52
can u give me a simpler explanation? not a native english speaker — AntiMAtter33, Jan 21 '20 at 21:57

score 1 · Accepted Answer · answered Jan 21 '20 at 23:46

In javascript objects, which includes arrays, are passed by reference when they are method parameters. This means if you change a property of the object in the method, it will change it in the original instance of the object

This is you problem line:

var cell = mat[i][j]=TILE

This overwrites the object stored at this position in the mat array.

Don't do this. I would have a tile property on the underling object and use that instead. Change createCell to:

function creatCell() {
    return {
        isBomb: false,
        isFlagged: false,
        isClicked: false,
        isOpen: false,
        image: "/img/tile.png"
    }
}

Change printMap to the following to access the new property :

function printMat(mat, selector) {
    var strHTML = '<table border="1"><tbody>';
    for (var i = 0; i < mat.length; i++) {
        strHTML += '<tr>';
        for (var j = 0; j < mat[0].length; j++) {
            var className = `cell-${i}-${j}`
            strHTML +=
                `<td class="${className}" 
              onclick="cellClicked(this, ${i}, ${j})">
                <img src="${mat[i][j].image}" >
            </td>`
        }
        strHTML += '</tr>'
    }
    strHTML += '</tbody></table>';
    var elContainer = document.querySelector(selector);
    elContainer.innerHTML = strHTML;
}

score 0 · Answer 2 · answered Jan 21 '20 at 22:00

0

this will return the parent td node if a child node was clicked:

var l_target = $(e.target);
if(!l_target.is('td')){
  l_target = l_target.closest('td');
}

answered Jan 21 '20 at 22:00

tstoev

1,415
11
12

i want to access the propery behind the click to alter its IsClicked propery to true, how do i do that? – AntiMAtter33 Jan 21 '20 at 22:05
what property do you want to change? and on what object. The code above will give you the td you clicked on. – tstoev Jan 21 '20 at 22:09
the cell that created with the creat cell function thats its place correlates with the cell's location class and change its value to true on the isClicked propery, how do i do that? how do i get the object behind the element? – AntiMAtter33 Jan 21 '20 at 22:12
something if the realm of if the cell (1,1) is clicked then cell(1,1).isClickled=true – AntiMAtter33 Jan 21 '20 at 22:21
assuming you pass your gBoard as mat in the printMat function this looks suspicious: var cell = mat[i][j]=TILE – tstoev Jan 21 '20 at 22:22
it overwrites the cells? im confused – AntiMAtter33 Jan 21 '20 at 22:26
the code is equivalent to mat[i][j]=TILE; var cell = mat[i][j]; As a general rule in programming if you are confused about your code trace it. In this particular case dump the value of mat[i][j] before and after the line – tstoev Jan 21 '20 at 22:27
so i added another usless var,doesnt answer my question tho – AntiMAtter33 Jan 21 '20 at 22:29
it actually does even if it does not do your work :( – tstoev Jan 21 '20 at 22:33

Accessing a table cell object instead of img

2 Answers2