Check if tags have the same class with pure Javascript

Asked

Viewed 49 times

1

I have nine Ivs, three in each row, each div has a span within it with a value. I have created a button that generates random numbers and when the generated number is equal to that of the div it will change its class and when 3 Divs of the same row or column have the same class display a 'Bingo' message. My question is how to make this check if the span’s have the same class to then display the bingo message.

<body>
<h1 class="text-center">Teste Bingo</h1>
<div class="num text-center">
    <p id="numSorteio"></p>
</div>
<div class="sorteio col-12 text-center">
    <a href="#" id="bt-gerar" class="btn btn-primary text-center btn-randow" >sorteio</a>
</div>
<div class="container">
    <div class="row row1">
        <div class="col-sm" value="3"><span  class="span-bingo n3">3</span></div>
        <div class="col-sm" value="8"><span class="span-bingo n8">8</span></div>
        <div class="col-sm" value="10"><span class="span-bingo n10">10</span></div>
    </div>
    <div class="row row2">
        <div class="col-sm" value="14"><span class="span-bingo n14">14</span></div>
        <div class="col-sm" value="20"><span class="span-bingo n20">20</span></div>
        <div class="col-sm" value="28"><span class="span-bingo n28">28</span></div>
        </div>
    <div class="row row3">
            <div class="col-sm" value="32"><span class="span-bingo n32">32</span></div>
            <div class="col-sm" value="40"><span class="span-bingo n40">40</span></div>
            <div class="col-sm" value="49"><span class="span-bingo n49">49</span></div>
    </div>
</div>


var sorteio = document.querySelector('p#numSorteio')
var sortNum = sorteio.innerHTML
var numAleatorio
 document.getElementById("bt-gerar").onclick = gerarAleatorio = () =>{
    numAleatorio = Math.floor(Math.random() * 50)
    sorteio.innerHTML = numAleatorio
    var divs = document.querySelectorAll('span'), i;
    var div = document.querySelector('span')

    for (i = 0; i < divs.length; ++i) {
      if(divs[i].innerText == numAleatorio){
        divs[i].classList.remove("span-bingo")
        divs[i].classList.add("numeroSorteado")

        }
      }
javascript

1 answer

0


Makes a for running through each .row counting how many elements have the class .numeroSorteado within it .row. If the value is equal to 3, BINGO!

Behold:

var sorteio = document.querySelector('p#numSorteio')
var sortNum = sorteio.innerHTML
var numAleatorio
document.getElementById("bt-gerar").onclick = gerarAleatorio = () =>{
   numAleatorio = Math.floor(Math.random() * 50)
   sorteio.innerHTML = numAleatorio
   var divs = document.querySelectorAll('span'), i;
   var div = document.querySelector('span')

   for (i = 0; i < divs.length; ++i) {
      if(divs[i].innerText == numAleatorio){
         divs[i].classList.remove("span-bingo")
         divs[i].classList.add("numeroSorteado")
      }
   }

   // busca as rows
   var rows = document.querySelectorAll('.container .row');
   
   for(var x = 0; x < rows.length; x++){
      if(rows[x].querySelectorAll(".numeroSorteado").length == 3){
         console.log("BINGO na linha "+ (x+1));
         break;
      }
   }
   
}
.numeroSorteado{
   color: white;
   background: blue;
   font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<h1 class="text-center">Teste Bingo</h1>
<div class="num text-center">
    <p id="numSorteio"></p>
</div>
<div class="sorteio col-12 text-center">
    <a href="#" id="bt-gerar" class="btn btn-primary text-center btn-randow" >sorteio</a>
</div>
<div class="container">
    <div class="row row1">
        <div class="col-sm" value="3"><span  class="span-bingo n3">3</span></div>
        <div class="col-sm" value="8"><span class="span-bingo n8">8</span></div>
        <div class="col-sm" value="10"><span class="span-bingo n10">10</span></div>
    </div>
    <div class="row row2">
        <div class="col-sm" value="14"><span class="span-bingo n14">14</span></div>
        <div class="col-sm" value="20"><span class="span-bingo n20">20</span></div>
        <div class="col-sm" value="28"><span class="span-bingo n28">28</span></div>
        </div>
    <div class="row row3">
            <div class="col-sm" value="32"><span class="span-bingo n32">32</span></div>
            <div class="col-sm" value="40"><span class="span-bingo n40">40</span></div>
            <div class="col-sm" value="49"><span class="span-bingo n49">49</span></div>
    </div>
</div>

  • How would it be possible to give 'bingo' also if the numbers in the same column have the same class . numeroSorteado ?

  • Then you have to ask a new question because it changes the programming.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.