Check if the span of the same column has the same class with pure Javascript

Asked

Viewed 32 times

1

I have nine span, three on each Row, when the 3 spans of the same Row have a certain class I display a message, I would like to know how to make the same logic if the span of the same column have the same class.

<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")

        }
      }
        // 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));
          sorteio.innerHTML = 'BINGO'
          break;
       }
    }
javascript

  • a doubt: if use bootstrap, also not to use jquery?

  • is only for level of knowledge. I’m starting to study javascript and would like to practice a lot with it pure, before leaving for jquery.

1 answer

1


One way I found it is with the help of an array, where you will store the column index inside the Row where an element with the class was found .numeroSorteado.

As there are 3 columns, if found in the first column, the array will be:

cols = [0] // o "0" representa a 1ª coluna

In the next draw, if you find it in the last column (index 2), the array will be:

cols = [0,2]

With this logic, with each selected number, you add in the array the column index and then count how many elements of the same value the array has. If it returns 3, it means that 3 numbers from the same column were drawn. For example:

        ↓     ↓ ↓
cols = [0,2,1,0,0] // significa que 3 números a 1ª coluna possuem a classe .numeroSorteado

You will create an empty array followed by a for that will go through each Row (taking advantage of the collection in var rows). Within that for will make another for to go through each span and check if span has the class .numeroSorteado. If found, insert the value of the variable in the array for (which represents the span index within the div). Next another for going through the array to count how many items have the variable value of the for. If the value is 3, it ends there break;, I mean, there was Bingo per column.

See in the code the excerpt added below the comment // verificar colunas that you will see what I have described above:

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');


   // verificar colunas
    var cols = []
    for(var x = 0; x < rows.length; x++){
       
       var spans = rows[x].querySelectorAll('span');
       
       for(var y = 0; y < spans.length; y++){
          var conta = 0;
          
          if(~spans[y].className.indexOf("numeroSorteado")){
             cols.push(y);
             
             for(var i = 0; i < cols.length; i++){
                if(cols[i] == y) conta++;
             }
             
             if(conta == 3){
                console.log("BINGO na coluna "+ (y+1));
                break;
             }
             
          }

       }
       
       // verificar linhas
       if(rows[x].querySelectorAll(".numeroSorteado").length == 3){
          console.log("BINGO na linha "+ (x+1));
          sorteio.innerHTML = 'BINGO'
          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>

Browser other questions tagged javascript

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