随机数，随机颜色循环答案

【问题标题】：Random numbers, random colour loops随机数，随机颜色循环
【发布时间】：2018-03-18 10:58:46
【问题描述】：

我目前正在自学 HTML/Javascript，但我遇到了一位同事提出的一些挑战。

我正在尝试创建将显示 1-99 之间的 3 个随机数的循环。每个显示随机颜色。进行了一些搜索，但无法找到包含我循环的这四个方面的任何内容。

下面是我到目前为止的地方。任何想法如何将其转换为循环？

非常感谢克里斯

    <!DOCTYPE html>
<html>
<body>
<center>
<h1>Hello World!</h1>

<h2>10 Random Coloured Numbers</h2>

<p id="no1"></p>
<p id="no2"></p>
<p id="no3"></p>


<script>
document.getElementById("no1","no2","no3").innerHTML =
Math.floor(Math.random() * 101)
document.getElementById("no1","no2","no3").style.color =
'#' + (Math.random() * 0xFFFFFF << 0).toString(16);
</script>

【问题讨论】：

从这里开始：w3schools.com/js/js_loop_for.asp w3schools.com/jsref/jsref_random.asp （等等）我的建议是用英文写出你想要这段代码做什么。这种伪代码将帮助您弄清楚这些部分的去向，然后您就可以在弄清楚时正确地获取语法。
参考文档是 MDN，尽可能避免使用 w3schools
来自 MDN 的相关文档：Loops and iteration、for、document.getElementById()、Math.random()

标签： javascript html loops random

【解决方案1】：

getElementById 只接受一个参数，所以即使你传递三个它也只会关心第一个，所以你应该将你的代码更改为：

document.getElementById("no1").innerHTML =
Math.floor(Math.random() * 101)
document.getElementById("no1").style.color =
'#' + (Math.random() * 0xFFFFFF << 0).toString(16);
document.getElementById("no2").innerHTML =
Math.floor(Math.random() * 101)
document.getElementById("no2").style.color =
'#' + (Math.random() * 0xFFFFFF << 0).toString(16);
document.getElementById("no3").innerHTML =
Math.floor(Math.random() * 101)
document.getElementById("no3").style.color =
'#' + (Math.random() * 0xFFFFFF << 0).toString(16);

document.getElementById("no1").innerHTML =
Math.floor(Math.random() * 101)
document.getElementById("no1").style.color =
'#' + (Math.random() * 0xFFFFFF << 0).toString(16);
document.getElementById("no2").innerHTML =
Math.floor(Math.random() * 101)
document.getElementById("no2").style.color =
'#' + (Math.random() * 0xFFFFFF << 0).toString(16);
document.getElementById("no3").innerHTML =
Math.floor(Math.random() * 101)
document.getElementById("no3").style.color =
'#' + (Math.random() * 0xFFFFFF << 0).toString(16);

<h1>Hello World!</h1>

<h2>10 Random Coloured Numbers</h2>

<p id="no1"></p>
<p id="no2"></p>
<p id="no3"></p>

也可以在这里找到：https://jsfiddle.net/9vg262w5/

当然会重复你的代码。像这样写，很容易找出除了id之外的一切都是一样的，所以你可以使用for并保存一些代码，如下所示：

for(var i=1; i<=3; i++){
  document.getElementById("no"+i).innerHTML =
  Math.floor(Math.random() * 101)
  document.getElementById("no"+i).style.color =
  '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
}

for(var i=1; i<=3; i++){
  document.getElementById("no"+i).innerHTML =
    Math.floor(Math.random() * 101)
  document.getElementById("no"+i).style.color =
    '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
}

<h1>Hello World!</h1>

<h2>10 Random Coloured Numbers</h2>

<p id="no1"></p>
<p id="no2"></p>
<p id="no3"></p>

也可以在这里找到：https://jsfiddle.net/9vg262w5/1/

【讨论】：

【解决方案2】：

你给document.getElementById 三个参数，但它只能接受一个。您希望它会为您循环遍历这三个 ID，但事实并非如此——您必须自己进行循环。

// fails because getElementById only takes one argument
document.getElementById("no1","no2","no3")

// works (gets one element)
document.getElementById("no1")

使用循环的第一步是知道传递变量而不是文字字符串也可以：

var firstId = "no1"
// works (gets one element)
document.getElementById(firstId)

您必须知道的另一件事是如何编写循环。有几种方法可以在 JavaScript 中编写循环，包括一般的 while 和 for，以及更高级但更短的方法，例如 .forEach 和 .reduce。

在这种情况下，我建议使用一个循环来计算从 1 到 3 的数字。（这实际上不是最简单的方法，因为您有三个字符串，例如 "no1" 正在循环，但它更容易稍后切换到动态添加颜色到页面，而不必事先手动编写三个 p 元素。）对于这个数字循环，您将使用 for 循环：

for (var i = 1; i <= 3; i++) {
  // this will be run three times, in which
  // the variable i will be 1, 2, or 3
}

在编写数字for 循环时，您必须决定的事情通常只是变量名称i、起始编号1 和结束编号3，以及何时停止在<=或在< 结束编号之前。另一种循环三次的常见方法是使用数字 0 到 2，使用 var i = 0; i < 3; i++。

对于您的示例代码，您的 ID 格式类似于“no1”，并且您需要从存储在变量 i 中的数字 1 到达那里。为此，您可以这样做var id = "no" + i。

所以现在你有了这个循环：

for (var i = 1; i <= 3; i++) {
  var id = "no" + i
  // the variable id will be "no1", "no2", or "no3"
}

为了帮助大家学习，我不会写出最终代码。但是从这里开始，将我告诉你的内容放在一起应该很容易弄清楚该怎么做。

【讨论】：

真的很有用，谢谢。很高兴成为 StackOverflow 社区的一员