javascript - 为什么我的 js 不读取 removeEventlistener？

问题描述

好像我的删除事件监听器不起作用？如果玩家再次单击它，我希望玩家能够从“td”元素中删除绿色。

这是 html 文档，它是我添加的 TD 元素和单击事件监听器并使所选区域变为绿色，然后如果再次单击，我想再次删除颜色。

<html>

<head>
  <title>Brogaarden bingo</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap" rel="stylesheet">
  <link rel="stylesheet" rev="stylesheet" href="bingo-card.css" />
  <script type="text/javascript" src="bingo-card.js">
  </script>
</head>

<body>
  <h1>Velkommen til Brogaardens Dyre Banko 2021!</h1>
  <p>Mere uddybende info kommer</p>
  <table>
    <tr>
      <th>B</th>
      <th>R</th>
      <th>O</th>
      <th>G</th>
      <th>A</th>
      <th>A</th>
      <th>R</th>
      <th>D</th>
      <th>E</th>
      <th>N</th>
    </tr>
    <tr>
      <td ><img id="square0" src=""></td>
      <td><img id="square1" src=""></td>
      <td id="free"></td>
      <td><img id="square2" src=""></td>
      <td><img id="square3" src=""></td>
      <td id="free"></td>
      <td><img id="square4" src=""></td>
      <td id="free"></td>
      <td id="free"></td>
      <td><img id="square5" src=""></td>
    </tr>
    <tr>
      <td id="free"></td>
      <td><img id="square6" src=""></td>
      <td><img id="square7" src=""></td>
      <td id="free"></td>
      <td><img id="square8" src=""></td>
      <td><img id="square9" src=""></td>
      <td id="free"></td>
      <td><img id="square10" src=""></td>
      <td id="free"></td>
      <td><img id="square11" src=""></td>
    </tr>
    <tr>
      <td><img id="square12" src=""></td>
      <td id="free"></td>
      <td><img id="square13" src=""></td>
      <td><img id="square14" src=""></td>
      <td id="free"></td>

      <td><img id="square15" src=""></td>
      <td id="free"></td>
      <td><img id="square16" src=""></td>
      <td><img id="square17" src=""></td>
      <td id="free"></td>
    </tr>
  </table>
  <p><a href="bingo-card.html" id="reload">KLIK HER</a> For at lave en ny bingo plade</p>

  <button onclick="window.print()">Vil du printe pladen? Så kan du klikke her</button>
</body>

</html>

window.onload = initAll;

var images = [
  'assets/abe.svg',
  'assets/and.svg',
  'assets/bjorn.svg',
  'assets/boffel.svg',
  'assets/pingvin.svg',
  'assets/solove.svg',
  'assets/elefant.svg',
  'assets/elg.svg',
  'assets/flamingo.svg',
  'assets/flodhest.svg',
  'assets/fugl.svg',
  'assets/faar.svg',
  'assets/ged.svg',
  'assets/guldfisk.svg',
  'assets/haj.svg',
  'assets/hane.svg',
  'assets/hest.svg',
  'assets/hjort.svg',
  'assets/hone.svg',
  'assets/hund.svg',
  'assets/kaenguru.svg',
  'assets/kakadue.svg',
  'assets/kamel.svg',
  'assets/kanin.svg',
  'assets/kat.svg',
  'assets/ko.svg',
  'assets/lama.svg',
  'assets/lemur.svg',
  'assets/marsvin.svg',
  'assets/mus.svg',
  'assets/nasehorn.svg',
  'assets/papegoje.svg',
  'assets/love.svg',
  'assets/struds.svg',
  'assets/rotte.svg',
  'assets/skildpadde.svg',
  'assets/svin.svg',
  'assets/zebra.svg'
];




// init: giver reloadevne til #reload og loader første dyre array med setSqaure
function initAll() {
  if (document.getElementById) {
    
    document.getElementById("reload").onclick = setSquare;
    setSquare();
   
  } else {
    alert("Your browser does not support this script.");
  }

}

//fylder html src ud med 18 random dyr taget fra arrayet
function setSquare() {
  //spørger efter 18 random elementer fra images arrayet
  var randomArray = getRandom(images, 18);


  //løb over de 18 pladser og sæt src til randomArrays plads nr. i
  for (var i = 0; i < 18; i++) {
    document.getElementById("square" + i).src = randomArray[i];
  }

  function clickHandler() {
   
    this.style.background = "green";
    clickDone();
  }

 // here I add the eventlistener on click
  document.querySelectorAll('td')
  .forEach(e => e.addEventListener("click", clickHandler));
}

//THIS IS THE ISSUE, here I try to remove it, with no succes
function clickDone (){
  document.querySelectorAll('td')
  .forEach(e => e.removeEventListener("click", clickHandler));
}

//arr er et array og n er antallet af random elementer fra det array du ønsker
//derefter returnerer den et nyt array med n random elementer
function getRandom(arr, n) {
  var result = new Array(n),
    len = arr.length,
    taken = new Array(len);
  if (n > len)
    throw new RangeError("getRandom: more elements taken than available");
  while (n--) {
    var x = Math.floor(Math.random() * len);
    result[n] = arr[x in taken ? taken[x] : x];
    taken[x] = --len in taken ? taken[len] : len;
  }
  
  
  return result;
  
}

标签： javascripthtmlhtml-tableonclickremoveeventlistener

javascript - 为什么我的 js 不读取 removeEventlistener？

问题描述

解决方案

推荐阅读