1

Estoy atorada con un código, es un juego de cartas en el que se encuentra aleatoriamente una carta ganadora, ya he declarado mis funciones, envío imprimir a llamar, etc. pero cuando abres la carta ganadora no hace nada cuando debería girar y mostrar una imagen con la leyenda que ganó, en la consola de Chrome me envía el mensaje

SyntaxError: identificador inesperado para la línea 101

donde cierro mi script, en Firefox me dice que el problema es con un paréntesis, ¿pueden ayudarme? ? Anexo imágenes del código completo, gracias.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style\style.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
            .tarjeta {
            border-style: solid;
            border-width: 1px;
            border-color: white;
            width: 150px;
            height: 150px;
            background-image: ("img\carta.jpg");
            color: white;
            display: inline-block;
          }
        body {
            font-family: 'Special Elite', cursive;
            background: linear-gradient(purple, white);
            ;
        }
    </style>
    <script>
           function animar() {
            document.getElementById("girarTarjeta").className = "animacionTarjeta";
        }
        function getRandomInt(max) {
            return Math.floor(Math.random() * Math.floor(max)) + 1;
        }
        function pintarTarjetas() {
            const numeroDeTarjetas = 10;
const tarjetaConPremio = getRandomInt(numeroDeTarjetas);
   for (let index = 1; index <= numeroDeTarjetas; index++) {
  var tarjeta = document.createElement("div"); 
                if (tarjetaConPremio === index) {
                tarjeta.setAttribute("onclick", '(img id="girarTarjeta")', '(src="img/ganaste.jpg")');
                } else {
              tarjeta.setAttribute("onclick", "alert('Sigue participando')");
                }
                tarjeta.setAttribute("class", "tarjeta"); 
                var elementoBreak = document.createElement("br");
                tarjeta.appendChild(elementoBreak);
                document.getElementById("tablero").appendChild(tarjeta);
            }
        }
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Busca premios</title>
</head>
<body>
    <h1>Busca el premio</h1>
            <div id="tablero">
        </div>
    <script>
        pintarTarjetas();
    </script>
</body>
</html>

4
  • Listo, gracias por tu apoyo Commented el 23 feb. 2020 a las 18:11
  • El código incluye la apertura de una etiqueta de comentario pero no su cierre, específicamente la línea <!-- <style> ¿así está el código que o ha sido un error de copiar y pegar?
    – Rubén
    Commented el 23 feb. 2020 a las 20:14
  • Hola Rubén, de hecho si fue un error al copiar y pegar, el problema en sí es en el apartado if (tarjetaConPremio === index) { tarjeta.setAttribute("onclick", '(img id="girarTarjeta")', '(src="img/ganaste.jpg")'); } else { tarjeta.setAttribute("onclick", "alert('Sigue participando')"); } Mando a llamar la imagen con la palabra ganador pero no lo hace, desconozco que esté declarando mal o que me falta mandar a llamar para que aparezca una vez que sale la carta ganadora, gracias por su ayuda Commented el 23 feb. 2020 a las 20:21
  • Me parece que debes agregar más detalles sobre cómo estas editando y probando tu código. ¿Tu código está alojado en un servidor o lo estás abriendo directamente de una ubicación local? ¿Que editor de HTML estás usando?
    – Rubén
    Commented el 23 feb. 2020 a las 21:01

3 respuestas 3

2

Tenés un typo en la última línea de tu script: estás enviando un "}" extra. Por cierto, ¿existe la variable boton? El siguiente error que aparece es que esa variable no está definida.

EDIT: Podrías crear una función que muestre la carta ganadora, e invocarla con "onclick". Hubiera utilizado también la función "animar" que está en el código, pero la omití ya que no sabía si en verdad se hacía uso de la función.

Moví el script al final del body para mayor legibilidad, aunque es aún mejor separar el css y js en archivos aparte.

El código quedaría de esta manera:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style\style.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
            .tarjeta {
            border-style: solid;
            border-width: 1px;
            border-color: white;
            width: 150px;
            height: 150px;
            background-image: url("img\carta.jpg");
            color: white;
            display: inline-block;
          }
        body {
            font-family: 'Special Elite', cursive;
            background: linear-gradient(purple, white);
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Busca premios</title>
</head>
<body>
    <h1>Busca el premio</h1>
    <div id="tablero">
    </div>
    <script>
           function animar() {
           document.getElementById("girarTarjeta").className = "animacionTarjeta";
        }
        function getRandomInt(max) {
            return Math.floor(Math.random() * Math.floor(max)) + 1;
        }
        function pintarTarjetas() {
            const numeroDeTarjetas = 10;
            const tarjetaConPremio = getRandomInt(numeroDeTarjetas);
            for (let index = 1; index <= numeroDeTarjetas; index++) {
              var tarjeta = document.createElement("div"); 
              if (tarjetaConPremio === index) {
                tarjeta.setAttribute("onclick", "mostrarGanador()");
              } else {
                tarjeta.setAttribute("onclick", "alert('Sigue participando')");
                }
                tarjeta.setAttribute("class", "tarjeta"); 
                var elementoBreak = document.createElement("br");
                tarjeta.appendChild(elementoBreak);
                document.getElementById("tablero").appendChild(tarjeta);
            }
        }
//función creada: determina dónde se produjo el evento, y modifica su fondo para mostrar la carta ganadora
        function mostrarGanador(){
          let tarjeta = event.target;
          tarjeta.style.backgroundImage = "url(img/ganaste.jpg)";
        }
        pintarTarjetas();
    </script>
</body>
</html>
2
  • Listo ya lo edité, olvide quitar lo del botón que eso ya no se ocupa, volví a correrlo pero sigue igual y antes del script si quito la llave } me quita las tarjetas Commented el 23 feb. 2020 a las 20:38
  • También había editado tu código como @Rubén, secundo su afirmación. Ahora, dos preguntas: ¿qué hace la función tarjetasPintadas cuando se selecciona la tarjeta con premio?, y ¿existe el elemento con el id "girarTarjeta"?
    – padaleiana
    Commented el 23 feb. 2020 a las 21:16
1

He pasado tu código a Stack Snippet para poder visualizarlo "fácilmente". Para esto tuve que "reacomodarlo" un poco pero no he cambiado/agregado ningún paréntesis . Aparentemente funciona, quizás el problema se resuelva si pasas tu JavaScript del head a la etiqueta script dentro de la etiqueta body (deberá ir antes de pintarTarjetas()

NOTA: El código en la pregunta se ve un poco desordenado. Sería conveniente que usaras un editor que incluya la función de para ordenarlo. Te ayudaría a identificar si efectivamente falta un paréntesis, si un bloque de código está no está bien puesto, entre otras cosas.

function animar() {
  document.getElementById("girarTarjeta").className = "animacionTarjeta";
}

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max)) + 1;
}

function pintarTarjetas() {
  const numeroDeTarjetas = 10;
  const tarjetaConPremio = getRandomInt(numeroDeTarjetas);
  for (let index = 1; index <= numeroDeTarjetas; index++) {
    var tarjeta = document.createElement("div");
    if (tarjetaConPremio === index) {
      tarjeta.setAttribute("onclick", '(img id="girarTarjeta")', '(src="img/ganaste.jpg")');
    } else {
      tarjeta.setAttribute("onclick", "alert('Sigue participando')");
    }
    tarjeta.setAttribute("class", "tarjeta");
    var elementoBreak = document.createElement("br");
    tarjeta.appendChild(elementoBreak);
    document.getElementById("tablero").appendChild(tarjeta);
  }
}

pintarTarjetas();
.tarjeta {
  border-style: solid;
  border-width: 1px;
  border-color: white;
  width: 150px;
  height: 150px;
  background-image: ("img\carta.jpg");
  color: white;
  display: inline-block;
}

body {
  font-family: 'Special Elite', cursive;
  background: linear-gradient(purple, white);
  ;
}
<h1>Busca el premio</h1>
<div id="tablero">
</div>

1

Seguramente después de 1 año no estés interesado en la respuesta, pero por si acaso te comento:
... A ver, la forma de añadir eventos a las 'tarjetas' es poco ORTODOXO, los añades 'en-línea' en formato texto, sería mejor añadirlos a través del manejador 'addEventListener' a través de alguna función controladora, pero bueno, si quieres seguir así deberías revisar la línea que te está dando problemas:

    tarjeta.setAttribute("onclick", '(img id="girarTarjeta")', '(src="img/ganaste.jpg")');

... quizás sustituir por algo como:

    tarjeta.setAttribute("onclick", 'this.style.backgroundImage = "url(./img/ganaste.jpg)"');

... pero claro todo depende de lo que quieras hacer al 'acertar'; si quisieras hacer más cosas como aplicarle efectos, modificarle otros atributos, etc.. debería ser a través de una función tipo 'handler' para 'addEventListener(..)'

PD: Por cierto el código presenta algunos errores no sólo en la parte 'javascript' también en el 'css', por ejemplo al aplicar estilo a las tarjetas en la línea:

background-image: ("img\carta.jpg");

... falta el nombre de la función 'url':

background-image: url("img/carta.jpg");

... y alguna cosilla más como que las barras inclinadas en la web se utilizan 'hacia la derecha' [/], propio de urls y uris; 'hacia la izda' [\] es exclusivo del sistema de archivos de Windows.

Como muestra:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style/style.css" />
    <title>Busca premios</title>
    <style>
        .tarjeta {
            border-style: solid;
            border-width: 1px;
            border-color: white;
            width: 150px;
            height: 220px;
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUBAMAAABPKxEfAAAAGFBMVEV+c32GfYOLfImLhImPiY7GwMPZ0tf07/PoCNZqAAAACXBIWXMAABJ0AAASdAHeZh94AAAAB3RJTUUH5QUVFiYaA22t0AAAAGhJREFUCNdNzdENgzAMBNBLJ+DkLoA3iAITQEZoN6D/Vcz+2AEJ7ufJH3fG/ol8YWuZpqXiz0RyRisiWSqMWcccUpUVbQCQQr+7qopbe5rC1+XZM6/p6Pth/KH0/eb79H17F0/Fr2c7AGvYGuyW/cGXAAAAAElFTkSuQmCC");
            background-repeat: no-repeat;
            background-size: 100%;
            color: white;
            display: inline-block;
        }
        body {
            font-family: 'Special Elite', cursive;
            background: linear-gradient(purple, white);
        }
    </style>
    <script>
        function animar() {
            document.getElementById("girarTarjeta").className = "animacionTarjeta";
        }
        function getRandomInt(max) {
            return Math.floor(Math.random() * Math.floor(max)) + 1;
        }
        function pintarTarjetas() {
            const numeroDeTarjetas = 10;
            const tarjetaConPremio = getRandomInt(numeroDeTarjetas);
            for (let index = 1; index <= numeroDeTarjetas; index++) {
                var tarjeta = document.createElement("div"); 
                if (tarjetaConPremio === index) {
                    //tarjeta.setAttribute("onclick", '(img id="girarTarjeta")', '(src="img/ganaste.jpg")');
                    /*tarjeta.addEventListener("onclick", function(){
                        tarjeta.setAttribute("id", "girarTarjeta");
                        tarjeta.style.backgroundImage = "./img/ganaste.jpg";
                    });*/
                    tarjeta.setAttribute("onclick", 'this.style.backgroundImage = "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUBAMAAABPKxEfAAAAGFBMVEUNq1ENsndJoXch3JIi678T8+WS86+y/eZA2r8zAAAACXBIWXMAABJ0AAASdAHeZh94AAAAB3RJTUUH5QUVFiUg7kwnoQAAAH9JREFUCNctzEEKwjAQBdAfCl03ttqtFOxsLZMLlEwOoGQuIJKsK94fJ+DfPP4wfGRmCaLIo5s4KOQO771iR7d5nxDRuoD/7qjfdTL7F9FslhPRJ+FRFvOGZ1kqvW3vUo91VuiVh84l6ADAnZHRtP+xKYjt3vZNZ0a2iECMIOkHsO4XzodhYhcAAAAASUVORK5CYII=)"');
                } else {
                    tarjeta.setAttribute("onclick", "alert('Sigue participando')");
                }
                tarjeta.setAttribute("class", "tarjeta"); 
                var elementoBreak = document.createElement("br");
                tarjeta.appendChild(elementoBreak);
                document.getElementById("tablero").appendChild(tarjeta);
            }
        }
    </script>
</head>
<body>
    <h1>Busca el premio</h1>
    <div id="tablero"></div>
    <script>
        pintarTarjetas();
    </script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.