¿Como usar el evento onclick en javascript?

Lowwand · #1 (**permalink**) 30/09/2014, 18:17

Buenas, de proyecto me encargaron hacer un memorama, ya hice todas las funciones y me funcionan de maravilla, el problema es que las imagenes eran estaticas... no cambiaban de lugar, asi que me puse a investigar que hacer para que fuera de manera aleatoria, asi que encontre que con un array random, el problema es que no me funciono el metodo puzzle_random o tiene una syntaxis mal, o me falta ejecutarlo?, la verdad soy nuevo en esto de javascript y no sabria decir si lo estoy haciendo de la manera correcta, espero y puedan decirme en donde esta mi error, segun mi logica con los ejemplos que vi de internet deberia funcionar, pero no funciona asi que agradeceria muchisimo si me ayudan.

Aqui les dejo mi codigo:

Código HTML:

<html>
<head>
<script>
function changeImage(variable, fondo) 
{
    var image = document.getElementById(variable);
 
    	if (image.src.match("card")) 
    	{
         image.src = fondo;
    	} 
    	
    	validar(variable, fondo);
    
}

function puzzle_random()
{
  var listado = new Array(
      "img/angry_black.png", 
      "img/angry_blue.png", 
      "img/angry_red_fat.png", 
      "img/angry_red_small.png", 
      "img/angry_green.png", 
      "img/angry_yellow.png", 
      "img/angry_white.png", 
      "img/bad_piggie.png");

    aleatorio = Math.floor(Math.random()*(listado.length)); 
    seleccion = listado[aleatorio]; 
    trace(seleccion);

    document.getElementById("myImage1").onclick = function() {changeImage('myImage1', listado[0])};
    document.getElementById("myImage2").onclick = function() {changeImage('myImage1', listado[1])};
    document.getElementById("myImage3").onclick = function() {changeImage('myImage1', listado[2])};
    document.getElementById("myImage4").onclick = function() {changeImage('myImage1', listado[3])};
    document.getElementById("myImage5").onclick = function() {changeImage('myImage1', listado[4])};
    document.getElementById("myImage6").onclick = function() {changeImage('myImage1', listado[5])};
    document.getElementById("myImage7").onclick = function() {changeImage('myImage1', listado[6])};
    document.getElementById("myImage8").onclick = function() {changeImage('myImage1', listado[7])};
    document.getElementById("myImage9").onclick = function() {changeImage('myImage1', listado[8])};
    document.getElementById("myImage10").onclick = function() {changeImage('myImage1', listado[10])};
    document.getElementById("myImage11").onclick = function() {changeImage('myImage1', listado[11])};
    document.getElementById("myImage12").onclick = function() {changeImage('myImage1', listado[12])};
    document.getElementById("myImage13").onclick = function() {changeImage('myImage1', listado[13])};
    document.getElementById("myImage14").onclick = function() {changeImage('myImage1', listado[14])};
    document.getElementById("myImage15").onclick = function() {changeImage('myImage1', listado[15])};
    document.getElementById("myImage16").onclick = function() {changeImage('myImage1', listado[16])};

}

document.getElementById("myImage1").addEventListener("click", changeImage('myImage1', 'img/angry_black'));

function rompecabezas(imagen1, imagen2)
{
	for (var i = 2; i > 0; i--) 
	{
		if (i == 2) 
		{
           imagenes_divididas(imagen1);
		}

		else
		{
           imagenes_divididas(imagen2);
		}
	}
}

function imagenes_divididas(imagen)
{
   switch(imagen) 
   {
    case "myImage1":
        var puzzle = document.getElementById(imagen);
        puzzle.src = "img/1.jpg";
        break;
    case "myImage2":
        var puzzle = document.getElementById(imagen);
        puzzle.src = "img/2.jpg";
        break;
    case "myImage3":
        var puzzle = document.getElementById(imagen);
        puzzle.src = "img/3.jpg";
        break;
    case "myImage4":
        var puzzle = document.getElementById(imagen);
        puzzle.src = "img/4.jpg";
        break;
    case "myImage5":
        var puzzle = document.getElementById(imagen);
        puzzle.src = "img/5.jpg";
        break;
    case "myImage6":
        var puzzle = document.getElementById(imagen);
        puzzle.src = "img/6.jpg";
        break;
    case "myImage7":
        var puzzle = document.getElementById(imagen);
        puzzle.src = "img/7.jpg";
        break;
    case "myImage8":
        var puzzle = document.getElementById(imagen);
        puzzle.src = "img/8.jpg";
        break;
    case "myImage9":
        var puzzle = document.getElementById(imagen);
        puzzle.src = "img/9.jpg";
        break;
    case "myImage10":
        var puzzle = document.getElementById(imagen);
        puzzle.src = "img/10.jpg";
        break;
    case "myImage11":
        var puzzle = document.getElementById(imagen);
        puzzle.src = "img/11.jpg";
        break;
    case "myImage12":
        var puzzle = document.getElementById(imagen);
        puzzle.src = "img/12.jpg";
        break;
    case "myImage13":
        var puzzle = document.getElementById(imagen);
        puzzle.src = "img/13.jpg";
        break;
    case "myImage14":
        var puzzle = document.getElementById(imagen);
        puzzle.src = "img/14.jpg";
        break;
    case "myImage15":
        var puzzle = document.getElementById(imagen);
        puzzle.src = "img/15.jpg";
        break;
    case "myImage16":
        var puzzle = document.getElementById(imagen);
        puzzle.src = "img/16.jpg";
        break;
   }
}

 function validar(id, ruta)
 {
    var valor = document.getElementById("carta").value;

    if(valor == 1)
    {
      document.getElementById('uno').innerHTML = ruta;
      document.getElementById('carta').value = 2;
      document.getElementById('id1').innerHTML = id;
    }

    else
    {
      document.getElementById('dos').innerHTML = ruta;
      document.getElementById('carta').value = 1;
      document.getElementById('id2').innerHTML = id;

	    var uno = document.getElementById('uno').innerHTML;
	    var dos = document.getElementById('dos').innerHTML;
	    var id1 = document.getElementById('id1').innerHTML;
	    var id2= document.getElementById('id2').innerHTML;
	    var image1 = document.getElementById(id1);
	    var image2 = document.getElementById(id2);
    
      if((uno == dos) && (id1 != id2))
      {
      	var timer = setTimeout(function timer_true()
      	{
      	  rompecabezas(id1, id2);
      	},1000);
      }

      else
      {
      	var timer2 = setTimeout(function no_resuelto()
      	{
          image1.src = "img/card.png";
          image2.src = "img/card.png";
      	},1000);
      }
    }
 } 
</script>
</head>
<body background="img/fondo_background.jpg">
<center>
<input type="text" value="1" id="carta">
<font color="white"><p id="uno"></p></font>
<font color="white"><p id="dos"></p></font>
<font color="white"><p id="id1"></p></font>
<font color="white"><p id="id2"></p></font>
<table border="1">
  <tr>
    <td><img id="myImage1" img src="img/card.png" alt="Angry Bird Black" width="150" height="251"></td>
    <td><img id="myImage2" img src="img/card.png" alt="Angry Bird Blue" width="150" height="251"></td> 
    <td><img id="myImage3" img src="img/card.png" alt="Angry Bird Green" width="150" height="251"></td>
    <td><img id="myImage4" img src="img/card.png" alt="Angry Bird Red Fat" width="150" height="251"></td> 
  </tr>
  <tr>
    <td><img id="myImage5" img src="img/card.png" alt="Angry Bird Red Small" width="150" height="251"></td>
    <td><img id="myImage6" img src="img/card.png" alt="Angry Bird White" width="150" height="251"></td> 
    <td><img id="myImage7" img src="img/card.png" alt="Angry Bird Yellow" width="150" height="251"></td>
    <td><img id="myImage8" img src="img/card.png" alt="Bad Piggie" width="150" height="251"></td> 
  </tr>
  <tr>
    <td><img id="myImage9" img src="img/card.png" alt="Angry Bad Piggie" width="150" height="251"></td>
    <td><img id="myImage10" img src="img/card.png" alt="Angry Bird Yellow" width="150" height="251"></td> 
    <td><img id="myImage11" img src="img/card.png" alt="Angry Bird White" width="150" height="251"></td>
    <td><img id="myImage12" img src="img/card.png" alt="Angry Red Small" width="150" height="251"></td> 
  </tr>
  <tr>
    <td><img id="myImage13" img src="img/card.png" alt="Angry Bird Red Fat" width="150" height="251"></td>
    <td><img id="myImage14" img src="img/card.png" alt="Angry Bird Green" width="150" height="251"></td> 
    <td><img id="myImage15" img src="img/card.png" alt="Angry Bird Blue" width="150" height="251"></td>
    <td><img id="myImage16" img src="img/card.png" alt="Angry Bird Black" width="150" height="251"></td> 
  </tr>
</table>
</center>
</body>
</html>