2

estoy programando una maquina traga.monedas con javascript y jquery, soy incapaz de encontrar por que las imagenes del tragamonedas no se actualizan...A continuacion les explico el codigo:

<html>
<head>
    <meta charset="UTF-8">
    <title>MaquinaTragamonedas</title>
    <script type="text/javascript" src="JQuery-clase/Js/jquery-3.3.1.js"></script> <!--Referenciando la hoja con el framework-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script> <!--Referenciando el cdn -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Especifico las carpetas de jquery

    <style>
        .l1 {
            background-size: 40px;
            width: 150px;
            height: 150px;
        }
        .l2 {
            background-size: 40px;
            width: 150px;
            height: 150px;
        }
        .l3 {
            background-size: 40px;
            width: 150px;
            height: 150px;
        }
    </style>

Creo 3 clases las cuales cada una hace referencia a cada espacio que ocupa cada imagen en la maquina tragamonedas

 <script type="text/javascript"> 
 $(document).ready(function(){

    $("#btnaccionar").on('click',function(){
        funciones();  
    });

   function NroRandom1() 
    {
      var N1 = Math.round(Math.random()*3);
      if(N1==0)
        {
            N1=N1+1;
        } 
        else
            {
                N1=N1;
            }
        if(N1==1)
        {
                $(".l1").attr("src","Img/img1.jpg");  
                $(".l1").attr("alt","ran1-img1");
        }
    else
        {
            if(N1==2)
                {
                        $(".l1").attr("src","Img/img2.jpg");
                        $(".l1").attr("alt","ran1-img2");
                }
            else
                {
                        $(".l1").attr("src","Img/img3.PNG");  
                        $(".l1").attr("alt","ran1-img3");
                }
        }
    }
    function NroRandom2() 
    {
      var N2 = Math.round(Math.random()*3);
      if(N2==0)
        {
            N2=N2+1;
        }  
        else
            {
                N2=N2;
            }
        if(N2==1)
        {
                $(".l2").attr("src","Img/img1.jpg"); 
                $(".l2").attr("alt","ran2-img1");
        }
    else
        {
            if(N2==2)
                {
                        $(".l2").attr("src","Img/img2.jpg");
                        $(".l2").attr("alt","ran2-img2");
                }
            else
                {
                        $(".l2").attr("src","Img/img3.PNG"); 
                        $(".l2").attr("alt","ran2-img3");
                }

        }
    }
    function NroRandom3() 
    {
      var N3 = Math.round(Math.random()*3);
      if(N3==0)
        {
            N3=N3+1;
        } 
        else
            {
                N3=N3;
            }

         if(N3==1)
        {
                $(".l3").attr("src","Img/img1.jpg"); 
                $(".l3").attr("alt","ran3-img1");
        }
    else
        {
            if(N3==2)
                {
                        $(".l3").attr("src","Img/img2.jpg"); 
                        $(".l3").attr("alt","ran3-img2");
                }
            else
                {
                        $(".l3").attr("src","Img/img3.PNG");  
                        $(".l3").attr("alt","ran3-img3");
                }
        }
    } 
    function funciones()
    {
        NroRandom1();
        NroRandom2();
        NroRandom3();
    }
}
</script>  

Hago una funcion que llama las 3 funciones anteriores para hacer funcionar la maquina tragamonedas

</head>
<body>

<table align="center" class="table-bordered">
      <tr>
        <th><img id="l1" class="l1" src="Img/img1.jpg"></th>
        <th><img id="l2" class="l2" src="Img/img2.jpg"></th> 
        <th><img id="l3" class="l3" src="Img/img3.png"></th>
      </tr>
</table>

Hago una tabla que tiene 3 th, en cada uno una imagen que tiene asignada una clase, para asì poder cambiar la imagen (Por jquery) segun la clase

<td style="text-align:left">
<button id="btnaccionar" class="btn-lg">Usar</button>
</td>

Genero un boton que al ser presionado deberia llamar las funciones y hacer funcionar la maquina, pero nada cambia

</body>
</html>

1 respuesta 1

2

Te dejo un ejemplo utilizando tu codigo pero con unos cambios.

$( document ).ready(function() {


$("#btnaccionar").on('click',function(){
Funciones();

});
    
    function NroRandom1() 
    {
      var N1 = Math.round(Math.random()*3);
      if(N1==0)
        {
            N1=N1+1;
        } 
        else
            {
                N1=N1;
            }
        if(N1==1)
        {
          
                $(".l1").attr("src","https://www.artescritorio.com/wp-content/uploads/2015/11/monsterball-portada.png"); 
 $(".l1").attr("alt","ran1-img1"); 

        }
    else
        {
            if(N1==2)
                {
                    
                        $(".l1").attr("src","http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/128/Perspective-Button-Standby-icon.png"); 
                        $(".l1").attr("alt","ran1-img2"); 
                      
                }
            else
                {
                        $(".l1").attr("src","https://norfipc.com/img/logos/icono-android.png"); 
                        $(".l1").attr("alt","ran1-img3"); 
                }
        }
    }
    function NroRandom2() 
    {
      var N2 = Math.round(Math.random()*3);
      if(N2==0)
        {
            N2=N2+1;
        }  
        else
            {
                N2=N2;
            }
        if(N2==1)
        {
                $(".l2").attr("src","https://www.artescritorio.com/wp-content/uploads/2015/11/monsterball-portada.png");  
$(".l2").attr("alt","ran2-img1");  
        }
    else
        {
            if(N2==2)
                {
                        $(".l2").attr("src","http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/128/Perspective-Button-Standby-icon.png"); 
$(".l2").attr("alt","ran2-img2"); 
                }
            else
                {
                        $(".l2").attr("src","https://norfipc.com/img/logos/icono-android.png");  
$(".l2").attr("alt","ran2-img3");  
                }
        }
    }
    function NroRandom3() 
    {
      var N3 = Math.round(Math.random()*3);
      if(N3==0)
        {
            N3=N3+1;
        } 
        else
            {
                N3=N3;
            }

         if(N3==1)
        {
               $(".l3").attr("src","https://www.artescritorio.com/wp-content/uploads/2015/11/monsterball-portada.png"); 
$(".l3").attr("alt","ran3-img1");                
        }
    else
        {
            if(N3==2)
                {
                        $(".l3").attr("src","http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/128/Perspective-Button-Standby-icon.png"); 
$(".l3").attr("alt","img2"); 
                }
            else
                {
$(".l3").attr("src","https://norfipc.com/img/logos/icono-android.png"); 
$(".l3").attr("alt","ran3-img3"); 
                }
        }
    }
    
    function Funciones()
    {
        NroRandom1();
        NroRandom2();
        NroRandom3();
    }
    
});
 .l1 {
            background-size: 40px;
            width: 150px;
            height: 150px;
        }
        .l2 {
            background-size: 40px;
            width: 150px;
            height: 150px;
        }
        .l3 {
            background-size: 40px;
            width: 150px;
            height: 150px;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table align="center" class="table-bordered">
      <tr>
        <th><img id="l1" class="l1" src="https://www.artescritorio.com/wp-content/uploads/2015/11/monsterball-portada.png" style="width:20px;height:20px;"></th>
        <th><img id="l2" class="l2" src="http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/128/Perspective-Button-Standby-icon.png" style="width:20px;height:20px;"></th> 
        <th><img id="l3" class="l3" src="https://norfipc.com/img/logos/icono-android.png" style="width:20px;height:20px;"></th>
      </tr>
</table>

<td style="text-align:left">
<button id="btnaccionar" class="btn-lg">Usar</button>
</td>

Espero te sirva.

7
  • puedes poner tu ejemplo con el sniper al formular tu respuesta Commented el 12 mar. 2018 a las 0:04
  • @x-rw editado gracias.
    – DMG
    Commented el 12 mar. 2018 a las 0:24
  • @DMG Gracias,hice las correcciones que propones pero sigue sin funcionarme, te pregunto que hace $(".l1").attr("alt","ran1-img3"); y sobre todo que es "ran1-img3" Commented el 12 mar. 2018 a las 3:38
  • @Gammath.rar solo es el texto que aparece cuando no carga o no encuentra la imagen no deberian afectar, lo use para probar el codigo sin imagenes ran1-img3 solo hace referencia a que esta dentro del random 1 - imagen 3, que es lo que no te funciona o te marca error?.
    – DMG
    Commented el 12 mar. 2018 a las 3:44
  • @DMG No, solo que era lo unico que no me cuadraba en los cambios y como es algo que desconocía pensé que era la razon de que siguiera sin funcionar, no funciona, simplemente se queda en las imagenes con las que comienza y al usar el boton nada pasa, actualicé la pregunta por si me puedes ayudar PD: Uso Brackets (No sé si afecte en algo) Commented el 12 mar. 2018 a las 3:49

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.