How can I successfully run an onclick for a div?

Question

I'm trying to make a memory game, and I have board as a multidimensional array holding picture sources. I want it so that on the div click, the photo is added. The code below does not work.

I've tried testing out to see if anything happens when the div is clicked with a console.log, but nothing comes up. The function is never run. However, running the function in the console makes it work.

function click(n, n1) {
    console.log("S")
    if(current == "") {
        console.log(board);
        console.log(board[n][n1]);
        current = board[n][n1].toString();
        var cols = document.getElementsByClassName('column');
        for(var i = 0; i < cols.length; i++) {
            if(cols[i].id == n.toString() + n1.toString()) {
                console.log('yss')
                cols[i].style.backgroundColor = "white";
                currentImg = document.createElement("img");
                currentImg.style.width = "50%";
                currentImg.style.height = "auto";
                currentImg.style.display = "block";
                currentImg.style.margin = "0 auto";
                currentImg.style.verticalAlign = "middle";
                currentImg.src = board[n][n1];
                cols[i].appendChild(currentImg);
            }
        }
    }
}

Scott Marcus · Accepted Answer

Your function name, click is conflicting with the event name click. Changing the function name solves the problem.

function clicked(n, n1) {
    console.log("S")
    if(current == "") {
        console.log(board);
        console.log(board[n][n1]);
        current = board[n][n1].toString();
        var cols = document.getElementsByClassName('column');
        for(var i = 0; i < cols.length; i++) {
            if(cols[i].id == n.toString() + n1.toString()) {
                console.log('yss')
                cols[i].style.backgroundColor = "white";
                currentImg = document.createElement("img");
                currentImg.style.width = "50%";
                currentImg.style.height = "auto";
                currentImg.style.display = "block";
                currentImg.style.margin = "0 auto";
                currentImg.style.verticalAlign = "middle";
                currentImg.src = board[n][n1];
                cols[i].appendChild(currentImg);
            }
        }
    }
}

.column { width:20px; height:20px; border:1px solid grey; display:inline-block; }

Having that out of the way, don't use inline HTML event attributes such as onclick in the first place. This is a 25+ year old technique that was used before we had modern standards and best practices and there are many good reasons not to use this syntax anymore. In fact, we can simplify your code quite a bit by setting up just one click event handler on a container of all these elements and leverage event bubbling to handle all the clicks there. Additionally, we can get rid of all the id attributes (which make for a brittle solution) and use data-* attributes so that each element can store its position in the matrix.

Note how much cleaner the HTML is now:

document.querySelector(".wrapper").addEventListener("click", function(event){
  // Check to see if the event originated at an element with a class of "column"
  if(event.target.classList.contains("column")){
    let cell = event.target.dataset.id;  // Get the data-id value of the clicked element
    console.log(cell);
  }
});

.column { width:20px; height:20px; border:1px solid grey; display:inline-block; }

How can I successfully run an onclick for a div?

Answers (1)

Related Questions