Can't add EventListener to object in javascript

Question

I'm having the following code that should add the EventListener for the click to every cell of the table, but if I put the name of function with the parameter, the function seems to start as the interpreter meets the inscruction to add the eventListener. How could I solve this?

    function startGame() {
            for(var i = 1; i <= 16; i++) {
                var cellValue = Math.floor(Math.random() * 16);
                while(isPresent(cellValue)) {
                    cellValue = Math.floor(Math.random() * 16);
                }
                numbers[cellValue] = true;
                var cell = document.getElementById("cell" + i);
                cell.addEventListener("click", selectCell(cell), false);
                if(cellValue == 0) {
                    cell.innerHTML = "";
                    cell.setAttribute("class", "emptyCell");
                } else {
                    cell.removeAttribute("class");
                    cell.innerHTML = cellValue;
                }   
            }
        }

    function selectCell(cell) {
            if(!isCellSelected) {
                cellSelected = cell;
                isCellSelected = true;
            } else if(cell == cellSelected) {
                cellSelected = null;
                isCellSelected = false;
            } else {
                var cellID = cell.id;
                var effectiveID = parseInt(cellID.substring(4, 6));
                if(isGranted(effectiveID)) {
                    //COMPLETARE METODO                     
                } else {
                    window.alert("Selezionare solo una cella adiacenta alla cella già selezionata.");
                }
            }
        }

        function isGranted(id) {
            var result;
            var existentEffectiveID = parseInt(cellSelected.id.substring(4, 6));
            //Se la cella selezionata è la successiva o precedente in termini orizzontali o verticali allora si puo' selezionare
            if(id == existentEffectiveID - 4 || id == existentEffectiveID + 4 || id == existentEffectiveID + 1 || id == existentEffectiveID - 1) {
                result = true;
            } else {
                result = false;
            }
            return result;
        }

Answer 1

The event listener wants a callback.

cell.addEventListener("click", selectCell(cell), false);

By giving it selectCell(cell) you are effectively saying, "call whatever selectCell() returns" which is undefined. The other problem is that selectCell() will be called as you are attaching the listener.

Consider the difference below:

var b1 = document.getElementById("b1");
var b2 = document.getElementById("b2");

var myVar = "hello";

function readVar(){
  console.log(myVar);
}
  

// Calling readVar() now will print "hello"
b1.addEventListener("click", readVar(), false);

// You want to wait until the event actually happens
b2.addEventListener("click", readVar, false);

// Now myVar is "world" and that will be printed whenever b2 is clicked
myVar = "world";

<button id="b1">Button 1</button>
<button id="b2">Button 2</button>

Answer 2

Remove the arguments on cell.addEventListener("click", selectCell(cell), false); and use cell.addEventListener("click", selectCell, false); instead. You can use this inside the function to refer to the element cell being clicked.