Skip to main content

Quitar borde a imagen cuando una funcion se ejecute

Estoy siguiendo un tutorial para crear un juego de cartas en JS y hasta ahora esta es la funcionalidad completa:

https://jsfiddle.net/fqc3so9z/

Consiste en poner dos cartas iguales, si se consigue se quedan congeladas (puestas para arriba) y se sigue el juego hasta que quedan todas para arriba.

**Lo que quiero añadir es que cuando se queden puestas para arriba, se quite el borde que tienen.**Es decir, como si se eliminase esta linea de la clase .card :

box-shadow: 1px 1px 1px rgba(0,0,0,.3);

Lo que hice es añadir la clase no-boder a cada carta, poner la clase .no-bordercon border:none; y añadir en esta linea (que supuestamente se ejecuta cuando ambas cartas coinciden) esto:

function disableCards() {
  firstCard.removeEventListener('click', flipCard);
  secondCard.removeEventListener('click', flipCard);

// Esto lo he añadido ahora:
  firstCard.classList.add('no-border')
  secondCard.classList.add('no-border')
  // 

  resetBoard();
}

Sin embargo no funciona. El problema es que no puedo usar el DOM directamente porque el juego tiene la naturaleza de que el order de las cartas cambia, y además no puedo saber que carta ha escogido el usuario (en que lugar esta), por lo que quitar manualmente el border de cada par de cartas con el DOM no me es posible.

Javier Cake
  • 1.5k
  • 1
  • 14
  • 38