SELECCIONAR IMAGEN Y APLIARLE UNA CLASE CON CLICK JAVASCRIPT
Publicado por Miriam (6 intervenciones) el 04/05/2022 22:44:46
Tengo este código html con tres imágenes, a las que no puedo modificar ni agregar nada:
<div id="player">
<img class="select" src="img/manzana.png" />
<img class="noSelect" src="img/pera.png" />
<img class="noSelect" src="img/ciruela.png" />
</div>
Necesito poder hacer clic en Javascript con addEventListener en cualquiera de las imágenes y cuando selecciono una de las imágenes aparece un borde rojo alrededor con la clase .select. y al resto de imágenes no seleccionadas se les aplica la clase .noselect
.select{
border: 5px solid red;
opacity: 1;
}
.noSelect{
opacity: 0.5;
}
He intentado hacerlo siguiendo esto pero no funciona y no se como continuar.
const btnManzana = document.getElementsByTagName("img")[0];
const btnPera = document.getElementsByTagName("img")[1];
const btnCiruela = document.getElementsByTagName("img")[2];
btnManzana.addEventListener("click", () => {
});
¿Puede alguien ayudarme?
Muchísimas gracias
<div id="player">
<img class="select" src="img/manzana.png" />
<img class="noSelect" src="img/pera.png" />
<img class="noSelect" src="img/ciruela.png" />
</div>
Necesito poder hacer clic en Javascript con addEventListener en cualquiera de las imágenes y cuando selecciono una de las imágenes aparece un borde rojo alrededor con la clase .select. y al resto de imágenes no seleccionadas se les aplica la clase .noselect
.select{
border: 5px solid red;
opacity: 1;
}
.noSelect{
opacity: 0.5;
}
He intentado hacerlo siguiendo esto pero no funciona y no se como continuar.
const btnManzana = document.getElementsByTagName("img")[0];
const btnPera = document.getElementsByTagName("img")[1];
const btnCiruela = document.getElementsByTagName("img")[2];
btnManzana.addEventListener("click", () => {
});
¿Puede alguien ayudarme?
Muchísimas gracias
Valora esta pregunta
0
