¿Cómo hacer que solo el elemento en el que se hizo clic muestre el color de fondo a través de javascript y el resto de los elementos desaparezcan? Como estoy aprendiendo el idioma, no sé muy bien cómo arreglar mi código para lograr este efecto.
gracias a todos.
function addStyle() { this.style.background = "blue"; } var el = document.querySelectorAll('li'); for (var i = 0; i < el.length; i++) { el[i].addEventListener('click', addStyle); } <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>Como corolario de la respuesta de David, también podría considerar usar la delegación de eventos . En lugar de adjuntar múltiples oyentes a múltiples elementos, agregue uno al elemento contenedor (la lista) y capture eventos de sus elementos secundarios a medida que "hacen burbujas" en el DOM. Luego puede verificar que el elemento sea un elemento de la lista , eliminar todas las clases de los otros elementos de la lista y establecer la clase para el elemento secundario en el que se hizo clic.
const list = document.querySelector('ul'); const items = list.querySelectorAll('li'); list.addEventListener('click', handleClick); function handleClick(e) { if (e.target.matches('li')) { items.forEach(item => item.classList.remove('blue')); e.target.classList.add('blue'); } } .blue { background-color: lightblue; } li:hover:not(.blue) { cursor: pointer; background-color: #efefef; } <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>Antes de configurar el fondo en azul, desactive todos los fondos:
function addStyle() { // unset all backgrounds for (var i = 0; i < el.length; i++) { el[i].style.background = "unset"; } // set this one to blue this.style.background = "blue"; } var el = document.querySelectorAll('li'); for (var i = 0; i < el.length; i++) { el[i].addEventListener('click', addStyle); } <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>