Question

这是我的代码：

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>

我尝试实现此方法，该方法为表（tds）的每个元素上色，为它提供3种颜色，我需要使用java-script中的random方法来实现它，并且每次按try it按钮时都赋予不同的颜色。谢谢

Answer 1

选择表格并遍历所有tr以应用颜色。您错误地选择了tr和td元素。使用document.querySelector或document.querySelectorAll获取它们计算一个因数为10的随机数通常会给出数组中不存在的索引。而是使用数组的长度乘以。选择所有td元素后，使用forEach循环对其进行迭代，并应用bg颜色并计算适当的随机索引，而不是在循环之前进行计算。对于循环内的代码，之前计算实际上并不是“随机的”

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>

Answer 2

您不能仅访问javascript中的DOM元素（如属性）。要获取DOM元素，最简单的方法是使用querySelector（）或querySelectorAll（）方法。（请参见此处的文档：https://developer.mozilla.org/de/docs/Web/API/Document/querySelector）

在您的情况下，您将获得所有 td 元素，如下所示：

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

，它将返回包含所有找到的 td 的 NodeList 。您可以像这样遍历它们：

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

将所有这些内容放入您的RandomColor函数中，单击即可运行。

还请检查来自MDN（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random）的此随机函数，该函数将为您提供给定范围内的随机数：

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 
}

我添加了随机函数，因为您的函数返回0到10之间的值，但是您的colors数组仅包含3个元素。

TR和TD的随机颜色表

2 个答案: