Problema javascript y html

lino85 · #1 (**permalink**) 03/12/2013, 19:11

Muy buenas a todos

Tengo un pequeño problema con una función en js.
La idea es agregar una imagen (aleatoria)a un div en html sacada de un array de forma aleatoria en js.

Este es mi codigo en js:

Código PHP:

   
// JavaScript Document 
 
window.onload =function randomCartas(cartaUno) 
{ 
 
     
 
   var cartaUno =[] 
   cartaUno[0] = (new Image()).src ="../juego_de_cartas/images/A1.png"; 
   cartaUno[1] = (new Image()).src ="../juego_de_cartas/images/A2.png"; 
   cartaUno[2] = (new Image()).src ="../juego_de_cartas/images/A3.png"; 
   cartaUno[3] = (new Image()).src ="../juego_de_cartas/images/A4.png"; 
   cartaUno[4] = (new Image()).src ="../juego_de_cartas/images/A5.png"; 
  
       
    var cartaAleatoria, temp; 
  
    for(var i = cartaUno.length - 1; i > 0; i--) 
    { 
      cartaAleatoria = Math.floor(Math.random() * (i + 1)); 
      temp = cartaUno[i]; 
      cartaUno[i] = cartaUno[cartaAleatoria]; 
      cartaUno[cartaAleatoria] = temp; 
    } 
      return alert (cartaUno[cartaAleatoria]);  
 
      var imagen= document.getElementById("carta1"); 
    
      imagen.style.backgroundImage = 'url(' + cartaUno[cartaAleatoria] +')'; 
 
  
};

Lo primero que hago es generar la función que se llama "randomCartas"y le agrego un parámetro llamado "cartaUno".
Después genero el array que contiene la lista de imagenes y lo llamo "cartaUno"que es el nombre del parámetro al que hago referencia en la función.
Después genero una variable que se llama "cartaAleatoria"y un bucle para recorrer el array y que me devuelva un indice al azar.
Despues retorno un alert para verificar que mi bucle funciona y efectivamente funciona y devuelve un indice al azar el cual ingreso en la variable cartaAleatoria.
Por ultimo me vuelvo loco e intento agregar mi imagen elegida al azar de mi array dentro de un div que se tiene id"carta1".

Ahora copio el codigo html:

Código HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>css3 transition</title>
<link rel="stylesheet" href="css/css3transition.css" />
<script src="js/matchgame.js"></script>
<script src="js/jquery-1.10.2.min.js">
randomCartas(cartaUno);
</script>
</head>

<body>
<header>
<h1>css3 transition</h1>
</header>
<section id="game">
  <div id="mazo">
   <div id="cartas">
       <div id="carta0" class="carta cartaA0"> </div>
       <div id="carta1" class="carta "></div>
       <div id="carta2" class="carta "></div>
             </div><!-- .carta -->
      </div>
   </div> <!-- #cartas -->
  </div> <!-- #mazo --> 
</section> <!-- #game -->
<footer>
<p>transicion de cartas mediante css3.</p>
</footer>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/matchgame.js"></script>

Evidentemente algo estoy haciendo mal pero no logro descubrir el que es, una manita buena seria de agradecer.

PD: siento la parrafada pero quería dejar claro los pasos que seguí.

caricatos · #2 (**permalink**) 03/12/2013, 23:36

Hola:

Si un tag script tiene un src asociado, no tiene sentido poner declaraciones dentro... si quieres cargar tu librería, usa un nuevo tag script...

Hay más cosas... es mejor que crees la función antes de llamarla desde el evento load, y si usas parámetros, los valores deben existir, y parece que tu creas el array dentro de la función.

Tu array supongo que bastará que sea de los src de las imágenes... crear los objetos y no usarlos no parece ser buena práctica.

Saludos

lino85 · #3 (**permalink**) 07/12/2013, 12:23

Declare el array fuera "y antes" de decrarar la función (elimine el parámetro cartaUno de la función porque me saltaba en el alert un undefinded).
También elimine los tags del array y deje solo las rutas de las imágenes, pero sigo sin poder ver las imágenes en las cartas de los divs