I am programming a swallowing machine with javascript and jquery, I am unable to find why the images of the slots are not updated ... Then I explain the code:
<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>
I specify the jquery folders
<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>
I create 3 classes which each one refers to each space that each image occupies in the slot machine
<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>
I do a function that calls the 3 previous functions to operate the slot machine
</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>
I make a table that has 3 th, in each one an image that has a class assigned, so that I can change the image (By jquery) according to the class
<td style="text-align:left">
<button id="btnaccionar" class="btn-lg">Usar</button>
</td>
I generate a button that when pressed should call the functions and operate the machine, but nothing changes
</body>
</html>