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í.