Question

我目前正在教自己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>

Answer 1

你给了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格式为＆＃34; no1＆＃34;，您需要从存储在变量1中的数字i获取。为此，您可以var id = "no" + i。

现在你有了这个循环：

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

为了帮助您学习，我不会写出最终的代码。但是从这里开始，通过整理我告诉你的内容应该很容易弄明白该做什么。

Answer 2

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 个答案: