How to make a comparison without id?

Asked

Viewed 76 times

0

I’m doing a school project (an automatic bingo), and I’m on the last step, compare the raffled value with the values added by users, I’m around a week trying to do this, if anyone can help me solve my problem, I really appreciate it!

Last topic: Every 4 seconds a number is drawn, and as soon as it is drawn I have to compare it with all users, so that if any possess I can mark it (with a div, or some syllable)then I can check which of the players has all the numbers marked and so power a winner alert.

Here follows the functions I used to expose the values (both those chosen by the user, and what will be drawn);

<script type="text/javascript">

      function novoUsuario(idTabela) {
        var tabela = document.getElementById(idTabela);
        var numeroLinhas = tabela.rows.length;
        var linha = tabela.insertRow(numeroLinhas);
        var nome = linha.insertCell(0);
        var nu = linha.insertCell(1);   
        var nd = linha.insertCell(2); 
        var nt = linha.insertCell(3);
        var nq = linha.insertCell(4);
        var nc = linha.insertCell(5);
        var botao = linha.insertCell(6);

        nome.innerHTML = document.getElementById('nome').value;
        nome.setAttribute("class","font-weight-bold");

        n1 = parseInt( document.getElementById('numero').value);
        n2 = parseInt( document.getElementById('numer').value);
        n3 = parseInt( document.getElementById('nume').value);
        n4 = parseInt( document.getElementById('num').value);
        n5 = parseInt( document.getElementById('nu').value);

        nu.innerHTML = n1;
        nd.innerHTML = n2;
        nt.innerHTML = n3;
        nq.innerHTML = n4;
        nc.innerHTML = n5;

        botao.innerHTML =  "<button onclick='removeLinha(this)' class='btn-outline-danger btn-sm btn'>Remover</button>"; 

        if (n1<1 || n1>75) {
          alert("Valores inadequados, por favor, exclua o usuário e adicione novamente, escolhendo números entre 1 e 75");
        }
      }

      var tempo = setInterval(sortear, 4000);


      function parar() {
        clearInterval(tempo);
      }

      function sortear() {
        var sorte = Math.floor(Math.random() * 75 + 1);
        document.getElementById('mostrar').innerHTML = sorte;
      }    

      function removeLinha(linha) {
        var i=linha.parentNode.parentNode.rowIndex;
        document.getElementById('tabela').deleteRow(i);
      }      

      

      function somenteNumeros(num) {
        var er = /[^0-9.]/;
        er.lastIndex = 0;
        var campo = num;
        if (er.test(campo.value)) {
          campo.value = "";
          alert("digite um número");
        }
    }

    </script>
<style type="text/css">
      td{ text-align: center }
      th{ text-align: center }
      body{background: url("fundo2.jpg")}
      #m{background: url("fundo5.gif")}
      .cor{background-color: black}

    </style>
<html>
  <head>
    <title>Bingo Online</title>
    <link rel="icon" href="img.png">
    <meta charset="UTF-8">    
    <meta name="description" content="jogue bingo online com seus amigos de forma rápida e prática">
    <meta name="keywords" content="bingo, ganhar">
    <meta name="author" content="Ketlly Azevêdo de medeiros">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


  </head>
  <body>




    <div id="ex1" class="modal">
      <div class="alert alert-success alert-dismissible">
        <button type="button" class="close" data-dismiss="alert"></button>
        <strong>Atenção!</strong> pode escolher do número 1 ao número 75.
      </div>
      <form id="form">
        <label >Nome:</label>
        <input type="text" class="form-control" id="nome" placeholder="Digite o nome do Usuário...">
        <label >Número 1:</label>
        <input type="text" class="form-control" id="numero" maxlength="2" placeholder="Digite um número..." onkeyup="somenteNumeros(this);">
        <label >Número 2:</label>
        <input type="text" class="form-control" id="numer" maxlength="2" placeholder="Digite um número" onkeyup="somenteNumeros(this);">
        <label >Número 3:</label>
        <input type="text" class="form-control" id="nume" maxlength="2" placeholder="Digite um número" onkeyup="somenteNumeros(this);">
        <label >Número 4:</label>
        <input type="text" class="form-control" id="num" maxlength="2" placeholder="Digite um número" onkeyup="somenteNumeros(this);">
        <label >Número 5:</label>
        <input type="text" class="form-control" id="nu" maxlength="2" placeholder="Digite um número" onkeyup="somenteNumeros(this);">
      </form>
      <a href="#" rel="modal:close"><button class="btn-sm btn-danger ml-3">Close</button></a> 
      <buttonid="adicionar" class="btn-sm btn-success ml-3" onclick="novoUsuario('tabela',this)">Adicionar</button>
    </div>

    <div class="container mt-3">

      <div class="row">
        <div class="col-sm rounded-top cor" >
          <p class="invisible">a</p>
        </div>
      </div>

      <div class="row">
        <div class="col-sm text-center mb-3 mt-3" id="m">
          <img src="img.png" alt="logo" title="bingo" width="30%">
        </div>
      </div>


      <div class="row">
        <div class="col-sm-3 border rounded bg-light" >
          <img src="glo.gif" width="70%" title="globo" alt="figura 1" style="position: relative; top: 25%; ">
          <button class="btn-sm btn-success ml-3" onclick="sortear()">Sortear</button>
          <div class="text-center border border-danger rounded shadow mb-3 mt-3"><h1 id="mostrar" class="text-danger"></h1></div>
        </div>

        <div class="col-sm-1 invisible"></div>

        <div class="col-sm-8 border rounded bg-light">
          <div class="table-responsive-sm shadow">
            <table id="tabela" class="table table-striped table-sm table-primary rounded mt-3">
              <thead>
                <th>Usuário:</th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th><a href="#ex1" rel="modal:open"><button class="btn-sm btn-outline-success" onclick="adicionar()"> adicionar</button></a></th>
              </thead>
            </table>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm cor rounded-bottom">
          
        </div>
      </div>
    </div>
  </body>
</html>

javascript html jquery

1 answer

0


I’m not sure I understand, but I believe you want to identify in the table which names with the drawn number.

A loop in the table elements should help.

  function sortear() {
    var sorte = Math.floor(Math.random() * 75 + 1);
    document.getElementById('mostrar').innerHTML = sorte;
    ganhadores(sorte, "tabela");
  }

  // Recebe como paramentro o numero sorteado e o id da tabela
  function ganhadores(num, tabelaID) {
    var tabela = document.getElementById(tabelaID), // obter a tabela pelo id
      cell;
    // Loop em cada linha da tabela
    for (var row = 0; row < tabela.rows.length; row++) {
      var contador = 0; // Contador para verificar vencedor
      cell = tabela.rows[row].getElementsByTagName("td"); // obter todas as colunas da tabela
      // Loop em cada coluna
      for (var i = 1; i < cell.length; i++) {
        // Verifica se o numero ja foi sorteado
        if (!cell[i].getAttribute("sorteado")) {
          // Verificar se o numero do usuário é igual ao sorteado
          if (parseInt(cell[i].innerHTML) === num) {
            // definir tag para lembrar que o numero já foi sorteador
            cell[i].setAttribute("sorteado", true);
            // colorir o numero de verde
            cell[i].setAttribute("style", "color: green");
            contador++;
          }
        } else {
          // Incrementar contador
          contador++;
        }

        // Verificar se o contador é igual a 5
        if (contador >= 5) {
          // Definir nome do vencedor de verde
          cell[0].setAttribute("style", "color: green");
          alert("Vencedor: " + cell[0].innerHTML);
          parar();
        }

      }
    } 
  }

  • I understood what you put, however, what I have to put is different: every 4 seconds a number is drawn, and as soon as it is drawn I have to compare it with all users, so that if any owns I can tag it (with a div, or some symbol)And then I can see which of the players has all the numbers scored so that I can get a winner alert. That’s the part about making that comparison to mark that I’ve been stuck for a long time.

  • Okay, I think I get it now... I edited my answer, I believe it’s a possible solution

Browser other questions tagged javascript html jquery

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