Coloring random color table of tr and td

Question

This my code:

var colors = ["red","blue","green"];
    function RandomColor(){
        var x = document.body.table.tr.td;
        var index = Math.floor(Math.random()*10);
        x.style.backgroundColor=colors[index];

    }

<table border="1" width="200" hight="100">
        <tr>
            <td id="demo">Moustafa</td>
            <td>Java</td>
            <td>Html</td>
        </tr>
        <tr>
            <td>Moustafa</td>
            <td>Java</td>
            <td>Html</td>
        </tr>
        <tr>
            <td>Moustafa</td>
            <td>Java</td>
            <td>Html</td>
        </tr>
        <tr>
            <td>Moustafa</td>
            <td>Java</td>
            <td>Html</td>
        </tr>


    </table>
    <button onclick="RandomColor()">Try it</button>

I tried to implement this method which colors each element of table (tds) giving it 3 colors i need to implement it using the random method in java-script and give my different colors every time i press try it button. Thank you

Don't give up now, you are getting close. First you need to select all your elements you wish to color - `document.querySelector` then you need to generate random colors. CSS colors consists of 4 values, but you only need to worry about 3 of them RGB. Each letter presents a primary color with a value between 0 and 255. If you read up on query selector, css colors and how to modify css colors using JavaScript you can do this — Leon, Mar 19 '19 at 11:13

ellipsis · Answer 1 · 2019-03-19T11:29:47.760

Select table and iterate over all the tr to apply the colors. You are incorrectly selecting the tr and td elements. Get them using document.querySelector or document.querySelectorAll Calculating a random number with a factor of 10 will often give indexes which do not exist in the array. Instead multiply using the length of the array. After selecting all the td element iterate over them using a forEach loop and apply the bg color with calculating the random index in place instead of calculating it before the loop. Calculating it before is not actually "random" for the code inside the loop

var colors = ["red", "blue", "green","orange","yellow","violet","lightblue","cyan","magenta"];
function RandomColor() {
  var x = document.querySelector('table');
  x.querySelectorAll('tr > td').forEach(e => e.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)])

}

<table border="1" width="200" hight="100">
  <tr>
    <td id="demo">Moustafa</td>
    <td>Java</td>
    <td>Html</td>
  </tr>
  <tr>
    <td>Moustafa</td>
    <td>Java</td>
    <td>Html</td>
  </tr>
  <tr>
    <td>Moustafa</td>
    <td>Java</td>
    <td>Html</td>
  </tr>
  <tr>
    <td>Moustafa</td>
    <td>Java</td>
    <td>Html</td>
  </tr>


</table>
<button onclick="RandomColor()">Try it</button>

This answer would be better with an explanation of what you've done — Liam, Mar 19 '19 at 11:16

score -1 · Accepted Answer · answered Mar 19 '19 at 11:32

You can't just access DOM elements like properties in javascript. To get DOM elements, the easiest way is to use the querySelector() or querySelectorAll() methods. ( See the documentation here: https://developer.mozilla.org/de/docs/Web/API/Document/querySelector )

In your case, you would get all td elements like this:

 var x = document.querySelectorAll('table td');

which will return a NodeList containing all td's found. You can iterate over them like this:

x.forEach(function( td ){
    var index = getRandomIntInclusive( 0, colors.length-1 ); // random int between 0 and 2
    td.style.backgroundColor = colors[index];
});

Put all of this in your RandomColor function, to run it on click.

Also check out this random function taken from MDN ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random ), which gives you a random number within the given range:

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive 
}

I added the random function because yours returns a value between 0 and 10, but your colors array contains only 3 elements.

Coloring random color table of tr and td

2 Answers2