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>