Removing event listener from a tile of sudoku game

Question

I`m trying to remove event listener from a tile that has been filled correctly on a sudoku game. But it is not working. After i fill the correct number on slot, i wish i wouldnt be able to click it again, but happens as the GIF show, it is erasing the grayed slots, meaning that removeEventListener is not working correctly. Any Help?

  function qsa(selector) {
    return document.querySelectorAll(selector);
  }

  function removeListenTiles() {
    let tiles = qsa("tile");
    for (let i = 0; i < tiles.length; i++) {
      if (tiles[i].innerHTML.indexOf("table") == -1) {
        if (tiles[i].textContent != "") {
          tiles[i].removeEventListener("click", () => handleTile(tile[i), true);
        }
      }
    }
  }

  function handleTile(tile) {
    if (!disableSelect) {
      if (tile.classList.contains("selected")) {
        removeAllGrayedSelected();
        updateMove();
        removeSelected(tile);
        selectedTile = null;
        selectedNum = null;
      } else {
        removeAllGrayedSelected();
        if (tile.innerHTML.indexOf("table") != -1) {
          for (let j = 0; j < 81; j++) {
            if (qsa(".tile")[j] !== tile) removeSelected(qsa(".tile")[j]);
          }
          tile.classList.add("selected");
          selectedTile = tile;
          updateSurround(tile);
          updateMove();
        }
      }
    }
  }

  function addListenTile(tile) {
    tile.addEventListener("click", () => handleTile(tile), true);
  }

Text

You can't remove a listener using an anonymous function, you need to use a reference to the same function that it was set with. You'll either need to store references to the original functions, or use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) for the whole board. — pilchard, Dec 21 '21 at 20:19
Does this answer your question? [Remove event listener with an anonymous function with a local scope variable](https://stackoverflow.com/questions/65379045/remove-event-listener-with-an-anonymous-function-with-a-local-scope-variable) — pilchard, Dec 21 '21 at 20:22
You've tagged this `reactjs` though, I'm wondering why you're setting listeners manually instead of using the React event handling? — pilchard, Dec 21 '21 at 20:27
Hi @pilchard, I tried the currying method, but happens the same thing on the GIF. I`ll Edit the post with new code sample I place reactjs on tag, it is because the base app, is a react app, but i made the sudoku itself in javascript. — Gnai Hari, Dec 21 '21 at 20:59
Solved! Thanks!!! ```js const addListenTile = (tile) => { tile.addEventListener("click", handlers[tile.id] = handleTile(tile), false); }; const removeListenTile = (tile) => { tile.removeEventListener("click", handlers[tile.id], false); } ```` Just need to put, tile.id on handlers array — Gnai Hari, Dec 21 '21 at 21:21

score 0 · Answer 1 · answered Dec 21 '21 at 21:51

Tried the currying method,and added tile.id to handlers array. Solved the problem.


  const handlers = [];

  const addListenTile = (tile) => {
    tile.addEventListener("click", handlers[tile.id] = handleTile(tile), true);
  };
  
  const removeListenTile = (tile) => {
    tile.removeEventListener("click", handlers[tile,id], true);
  }

  const handleTile = function (tile)  {
    return function onhandlerTile(event) {
      console.log("OK1")
      if (!disableSelect) {
        if (tile.classList.contains("selected")) {
          console.log("OK2");
          removeAllGrayedSelected();
          updateMove();
          removeSelected(tile);
          selectedTile = null;
          selectedNum = null;
        } else {
          console.log("OK3");
          removeAllGrayedSelected();
          if (tile.innerHTML.indexOf("table") != -1) {
            for (let j = 0; j < 81; j++) {
              if (qsa(".tile")[j] !== tile) removeSelected(qsa(".tile")[j]);
            }
            tile.classList.add("selected");
            selectedTile = tile;
            updateSurround(tile);
            updateMove();
          }
        }
      }
    };
  };

Removing event listener from a tile of sudoku game

1 Answers1