I can not change the background color of the numbers in my table

Navigation
0

I'm trying to create a table with 100 numbers that make sweepstakes according to the amount of numbers I want. However I need each draw to be able to view the number that was drawn and for that I have to highlight it. I'm trying to highlight the numbers in yellow. And I can not. The seemingly my javaScript is not interacting with HTML. Does anyone know what I can do in such a case?

obs: If I am confused I will write in other words, as I click on the draw button I must make a draw and mark the number in the table and so on. 

<!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>
    
asked by anonymous 02.11.2018 / 21:36

1 answer

1

Hello, I have refacted some parts of your code, now it is coloring the chosen ones yellow and printing on the screen, in case the number is repeated it paints the back of red. Its errors were many for lack of attention because the ids of the numbers were some erroneous type the number 98 with the id 8. It follows the code down. 

<!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>
    
02.11.2018 / 22:34
Hide login page for logged in users Filters UseAgent Via Database