随机数，随机颜色循环
[英]Random numbers, random colour loops
问题描述
I'm currently teaching myself HTML/Javascript, with a few challenges set by a colleague. 
我目前正在自学HTML / Javascript，有同事提出了一些挑战。
I'm trying to create loops which will display 3 random numbers between 1-99. 我正在尝试创建将在1至99之间显示3个随机数的循环。 Each displaying a random colour. 每个显示随机的颜色。 Have done some searching and unable to find anything that incorporates these four aspects of my loop. 已经进行了一些搜索，无法找到任何包含我循环这四个方面的内容。
Below is where I've got to so far. 以下是到目前为止我要去的地方。 Any ideas how to convert this into loops? 任何想法如何将其转换为循环？
Many thanks Chris 非常感谢克里斯
<!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>
2 个解决方案
解决方案1
0 2017-10-06 15:43:25
You're giving document.getElementById three arguments, but it can only take one. 您要给document.getElementById三个参数，但只能有一个。 You were hoping that it would loop through the three IDs for you, but it doesn't – you'll have to do the looping yourself. 您希望它可以为您循环显示三个ID，但事实并非如此-您必须自己进行循环。
// fails because getElementById only takes one argument
document.getElementById("no1","no2","no3")
// works (gets one element)
document.getElementById("no1")
The first step to using a loop is knowing that passing a variable instead of a literal string will work too: 使用循环的第一步是知道传递变量而不是文字字符串也可以工作：
var firstId = "no1"
// works (gets one element)
document.getElementById(firstId)
The other thing you have to know is how to write a loop. 您必须知道的另一件事是如何编写循环。 There are a few ways to write loops in JavaScript, including while and for in general, and more advanced but shorter methods such as .forEach and .reduce . 有写循环的几种方法在JavaScript中，包括while和for一般，和更先进的，但更短的方法，如.forEach和.reduce 。
In this case I would recommend a loop that counts up the numbers from 1 to 3. (That's not actually the simplest method given that you have three strings like "no1" that you are looping through, but it makes it easier to later switch to dynamically adding the colors to the page without having to manually write three p elements beforehand.) For this numeric loop you would use a for loop: 在这种情况下，我建议您使用一个循环来计算从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
}
The things that you have to decide when writing a numeric for loop are usually just the variable name i , the starting number 1 , and ending number 3 , and when you stop at <= or before < the ending number. 在编写数字for循环时，您必须决定的事情通常只是变量名i ，起始数字1和终止数字3以及何时在<=或<结束数字之前停止。 Another common way of looping three times would be with the numbers 0 to 2, with var i = 0; i < 3; i++ 循环三遍的另一种常见方式是使用数字0到2，并且var i = 0; i < 3; i++ var i = 0; i < 3; i++ var i = 0; i < 3; i++ . var i = 0; i < 3; i++ 。
For your example code you have IDs formatted like "no1", and you need to get there from the number 1 stored in the variable i . 对于示例代码，您具有ID的格式类似于“ no1”，并且您需要从变量i存储的数字1到达那里。 For that you can do var id = "no" + i . 为此，您可以执行var id = "no" + i 。
So now you have this loop: 现在，您有了以下循环：
for (var i = 1; i <= 3; i++) {
var id = "no" + i
// the variable id will be "no1", "no2", or "no3"
}
To help you learn, I won't write out the final code. 为了帮助您学习，我不会写出最终代码。 But from here it should be easy to figure out what to do by putting together what I've told you. 但是从这里开始，通过汇总我告诉您的内容应该很容易弄清楚该怎么做。
解决方案2
0 已采纳 2017-10-06 15:51:22
getElementById only accepts one parameter, so even if you pass three it will only care about the first one, so you should change your code to something like: 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>
Also available here: https://jsfiddle.net/9vg262w5/ 也可以在这里找到： https : //jsfiddle.net/9vg262w5/
Of course it would be repeating your code. 当然，它将重复您的代码。 Written like that, it's easy to figure out everything is the same except for the id , so you could use a for and save some code, like this: 像这样写，很容易找出除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>
Also available here: https://jsfiddle.net/9vg262w5/1/ 也可以在这里找到： https : //jsfiddle.net/9vg262w5/1/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.