I can’t change the background color of my table numbers

Asked

Viewed 32 times

0

I am trying to create a table with 100 numbers that will carry out draws according to the amount of numbers I want. However I need to each draw be able to visualize the number that was drawn and for that I have to highlight it. I’m trying to highlight the yellow numbers. And I’m not getting it. Apparently my Java is not interacting with HTML. Does anyone know what I can do in a case like this ?

Obs: In case you are confused I will write in other words, as I click the draw button I must perform 1 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>
javascript background-color

  • Your code didn’t work, but as for the background you’re setando like this id.style.background = "#FFFF00"; and the right thing is id.style.backgroundColor = "#FFFFF00";. I also did not understand the question, because if it is to change the background text, then you change the color of the text, in which case it would be id.style.color = "#FFFF00";

1 answer

1

Hello, I redid some parts of your code, now it is coloring yellow the chosen and printing on the screen, if the number is repeated it paints the back of red. Your errors were many due to lack of attention because the number ids were some wrong like number 98 with id 8. Follow the code below.

<!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>

Browser other questions tagged javascript background-color

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