Estoy haciendo Etch un proyecto de boceto con métodos JavaScript y DOM. Esto es lo que hice 👇
ChangeColour() usando el atributo onclick . (La función incluye EventListener (Evento: mouseover) para dar color de fondo para cada celda).Quiero dejar de colorear celdas cuando hago clic en cualquier celda .
Intenté volver; y la función removeEventListner(). Ambos no funcionaron.
HTML:
<section id="container"></section>JavaScript:
<script> let i = 0; container.innerHTML = `<section class="row">${'<div class="cell" onclick="changeColour()"></div>'.repeat(n)}</section>` .repeat(n) function changeColour(){ const cells = document.querySelectorAll('div'); cells.forEach((div) => { div.addEventListener('mouseover', () => { div.setAttribute('style', 'background: black;'); }) }) } </script>No puede eliminar el controlador de eventos creado a partir del atributo onclick porque no tiene una referencia a él; fue creado por el analizador HTML .
Si agrega el detector de eventos en JavaScript en lugar de HTML, utilizando changeColor como controlador, debería poder eliminarlo fácilmente. No estoy seguro de que esto sea exactamente lo que quieres lograr, pero en la línea de:
"use strict"; const n=3; // testing container.innerHTML = `<section class="row">${'<div class="cell"></div>'.repeat(n)}</section>` .repeat(n) const changeColor = event => {event.currentTarget.style.background="black"} const clickHandler = event => { document.querySelectorAll('.cell').forEach( cell=> { cell.removeEventListener( "click", clickHandler); cell.removeEventListener("mouseover", changeColor); }); } document.querySelectorAll('.cell').forEach(div=> { div.addEventListener("click",clickHandler); div.addEventListener("mouseover", changeColor); }); .cell { display: inline-block; border: thin solid blue; width: 2rem; height: 2rem; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin></script> <!-- body-html --> <section id="container"></section>