0

Estou tentando criar um tabela com 100 números que realize sorteios de acordo com a quantidade de números que eu quiser. No entanto eu preciso a cada sorteio ser capaz de visualizar o numero que foi sorteado e para isso tenho que destacar ele. Estou tentando destacar os números de amarelo. E não estou conseguindo. A aparentemente o meu javaScript não está interagindo com o HTML. Alguém sabe o que posso fazer num caso desses ?

obs: Caso esteja confuso eu vou escrever em outras palavras, a medida que clico no botão sortear devo realizar 1 sorteio e marcar o numero na tabela e assim em diante.

<!DOCTYPE html>
<html>
<body>
<h1>Loteria AJAX - PLUS</h1>

Quantidade de número:<input type="text" id="numero">

<button type="button" id="sorteio" >Sortear</button> <button type="reset" > 
Limpar</button>
<br><br>
<table border="1px">
Resultado:
<tr><td id="0">0</td><td id="1">1</td><td id="2">2</td><td id="3">3</td><td 
id="4">4</td><td id="5">5</td><td id="6">6</td><td id="7">7</td><td 
id="8">8</td><td id="9">9</td></tr>
<tr><td id="10">10</td><td id="11">11</td><td id="12">12</td><td 
id="13">13</td><td id="14">14</td><td id="15">15</td><td id="16">16</td><td 
id="17">17</td><td id="18">18</td><td id="19">19</td></tr>
<tr><td id="20">20</td><td id="21">21</td><td id="22">22</td><td 
id="23">23</td><td id="24">24</td><td id="25">25</td><td id="26">26</td><td 
id="7">27</td><td id="8">28</td><td id="29">29</td></tr>
<tr><td id="30">30</td><td id="31">31</td><td id="32">32</td><td 
id="33">33</td><td id="34">34</td><td id="35">35</td><td id="36">36</td><td 
id="7">37</td><td id="8">38</td><td id="39">39</td></tr>
<tr><td id="40">40</td><td id="41">41</td><td id="42">42</td><td 
id="43">43</td><td id="44">44</td><td id="45">45</td><td id="46">46</td><td 
id="7">47</td><td id="8">48</td><td id="49">49</td></tr>
<tr><td id="50">50</td><td id="51">51</td><td id="52">52</td><td 
id="53">53</td><td id="54">54</td><td id="55">55</td><td id="56">56</td><td 
id="7">57</td><td id="8">58</td><td id="59">59</td></tr>
<tr><td id="60">60</td><td id="61">61</td><td id="62">62</td><td 
id="63">63</td><td id="64">64</td><td id="65">65</td><td id="66">66</td><td 
id="7">67</td><td id="8">68</td><td id="69">69</td></tr>
<tr><td id="70">70</td><td id="71">71</td><td id="72">72</td><td 
id="73">73</td><td id="74">74</td><td id="75">75</td><td id="76">76</td><td 
id="7">77</td><td id="8">78</td><td id="70">79</td></tr>
<tr><td id="80">80</td><td id="81">81</td><td id="82">82</td><td 
id="83">83</td><td id="84">84</td><td id="85">85</td><td id="86">86</td><td 
id="7">87</td><td id="8">88</td><td id="89">89</td></tr>
<tr><td id="90">90</td><td id="91">91</td><td id="92">92</td><td 
id="93">93</td><td id="94">94</td><td id="95">95</td><td id="96">96</td><td 
id="7">97</td><td id="8">98</td><td id="99">99</td></tr>
</table>    
    <p id="sorteadosId"></p>

</body>
<script>
var form = document.getElementById('sorteio').addEventListener('click', 
geraAleatorios);

        function geraAleatorios(numero){
            var numero = parseInt(document.getElementById('numero').value);
            var i=0;
            do{
                var numeros = [];
                function numero_aleatorio() {
                    var aleatorio = Math.floor(Math.random() * 100);
                    if (numeros.indexOf(aleatorio) == -1){
                        console.log("aleatorio")
                        var id = document.getElementById("aleatorio");
                        id.style.backgroundColor = "#FFFF00";
                        document.getElementById("sorteados")+="<br>"+id+ " 
 Sorteado";

                    }else{
                         var numeroAtual=numero-i;
                         document.getElementById("sorteados")+=" 
 <br>"+id+"Sorteado(repetido)"
                         geraAleatorios(numeroAtual);
                        }
                }
                i++
            }while(i<numero)

    }           


    </script>

 </script>
 </html>
1
  • O seu código não deu para rodar, mas, quanto ao background você está setando assim id.style.background = "#FFFF00"; e o correto é assim id.style.backgroundColor = "#FFFF00";. Também não entendi a pergunta, pois, se é para mudar o background do texto, então você que mudar a cor do texto, que no caso seria id.style.color = "#FFFF00";
    – LeAndrade
    Commented 2/11/2018 às 21:06

1 Resposta 1

1

Olá, refiz algumas partes do seu codigo, agora ele esta colorindo de amarelo os escolhidos e printando na tela, caso o numero seja repetido ele pinta o back de vermelho. Seus erros foram muitos por falta de atençao pois os ids dos numeros estavam alguns errados tipo o numero 98 com o id 8. Segue o codigo a baixo.

<!DOCTYPE html>
<html>
<body>
<h1>Loteria AJAX - PLUS</h1>

Quantidade de número:<input type="text" id="numero">

<button type="button" id="sorteio" >Sortear</button> <button type="reset" > 
Limpar</button>
<br><br>
<table border="1px">
Resultado:
<tr><td id="0">0</td><td id="1">1</td><td id="2">2</td><td id="3">3</td><td 
id="4">4</td><td id="5">5</td><td id="6">6</td><td id="7">7</td><td 
id="8">8</td><td id="9">9</td></tr>
<tr><td id="10">10</td><td id="11">11</td><td id="12">12</td><td 
id="13">13</td><td id="14">14</td><td id="15">15</td><td id="16">16</td><td 
id="17">17</td><td id="18">18</td><td id="19">19</td></tr>
<tr><td id="20">20</td><td id="21">21</td><td id="22">22</td><td 
id="23">23</td><td id="24">24</td><td id="25">25</td><td id="26">26</td><td 
id="27">27</td><td id="28">28</td><td id="29">29</td></tr>
<tr><td id="30">30</td><td id="31">31</td><td id="32">32</td><td 
id="33">33</td><td id="34">34</td><td id="35">35</td><td id="36">36</td><td 
id="37">37</td><td id="38">38</td><td id="39">39</td></tr>
<tr><td id="40">40</td><td id="41">41</td><td id="42">42</td><td 
id="43">43</td><td id="44">44</td><td id="45">45</td><td id="46">46</td><td 
id="47">47</td><td id="48">48</td><td id="49">49</td></tr>
<tr><td id="50">50</td><td id="51">51</td><td id="52">52</td><td 
id="53">53</td><td id="54">54</td><td id="55">55</td><td id="56">56</td><td 
id="57">57</td><td id="58">58</td><td id="59">59</td></tr>
<tr><td id="60">60</td><td id="61">61</td><td id="62">62</td><td 
id="63">63</td><td id="64">64</td><td id="65">65</td><td id="66">66</td><td 
id="67">67</td><td id="68">68</td><td id="69">69</td></tr>
<tr><td id="70">70</td><td id="71">71</td><td id="72">72</td><td 
id="73">73</td><td id="74">74</td><td id="75">75</td><td id="76">76</td><td 
id="77">77</td><td id="78">78</td><td id="79">79</td></tr>
<tr><td id="80">80</td><td id="81">81</td><td id="82">82</td><td 
id="83">83</td><td id="84">84</td><td id="85">85</td><td id="86">86</td><td 
id="87">87</td><td id="88">88</td><td id="89">89</td></tr>
<tr><td id="90">90</td><td id="91">91</td><td id="92">92</td><td 
id="93">93</td><td id="94">94</td><td id="95">95</td><td id="96">96</td><td 
id="97">97</td><td id="98">98</td><td id="99">99</td></tr>
</table>    
    <p id="sorteadosId"></p>


</body>
<script>

    var botao = document.querySelector('#sorteio');
    botao.addEventListener('click', geraAleatorios);

    function geraAleatorios(){
      var numero = parseInt(document.querySelector("#numero").value);
      var i=0;
      var numeros = [];
      do{


        var aleatorio = Math.floor(Math.random() * 100);
        if (numeros.indexOf(aleatorio) == -1){
            console.log(aleatorio)
            var id = aleatorio;
            var numeroEscolhido = document.getElementById(id);
            numeroEscolhido.style = "background-color: yellow"
            var sorteadosDiv = document.getElementById("sorteadosId")
            sorteadosDiv.innerHTML += "<br>"+id+" Sorteado";
            numeros.push(id)

        }else{
         console.log(aleatorio+" repetido")
         var id = aleatorio;
         var numeroEscolhido = document.getElementById(id);
         numeroEscolhido.style = "background-color: red"
         var sorteadosDiv = document.getElementById("sorteadosId")
         sorteadosDiv += "<br>"+aleatorio+"Sorteado(repetido)"
         numeros.push(id)
     }

     i++
 }while(i<numero)

}           


</script>

</script>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .