JavaScriptでdiv要素にランダムな色をつける方法

JavaScriptでいくつかのdiv要素にそれぞれ10個の色の中から1つをランダムに指定したいのですが、このコードでは上手くいきません。
どうすれば動くのでしょうか。

html
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<meta charset="utf-8">
5		<title>No title</title>
6		<style>
7
8div {
9	width: 300px;
10	height: 300px;
11	margin: 10px 0;
12	background: aqua;
13}
14
15		</style>
16	</head>
17	<body>
18		<div>a</div>
19		<div>b</div>
20		<div>c</div>
21		<div>d</div>
22		<div>e</div>
23		<div>f</div>
24		<div>g</div>
25		<div>h</div>
26		<div>i</div>
27		<div>j</div>
28		<div>k</div>
29		<div>l</div>
30		<script>
31
32window.onload = function () {
33
34	var divEle = document.getElementsByTagName('div');
35	var colors = ['#d32f2f','#e040fb','#03a9f4','#5d4037','#7c4dff','#616161','#7b1fa2','#009688','#afb42b','#ff5722'];
36	var cnt    = 0;
37
38	while( divEle.length == cnt ) {
39		var random = Math.floor( Math.random() * 10 );
40		divEle[ cnt ].style.backgroundColor = colors[ random ];
41		cnt++;
42	}
43
44}
45
46		</script>
47	</body>
48</html>

querykuma

2019/09/16 05:50

while文のご理解がちがうかもしれません。

行動規範の内容に同意します

回答2件

ベストアンサー

JavaScriptのwhile文が誰でもわかる

cnt=0のときdivEle.length == cntは誤り(FALSE)ですからwhile文は一度も実行されません。

投稿2019/09/16 05:49

querykuma

総合スコア777

teratailuser_01

2019/09/16 06:39

『while文は条件式がtrueの間、実行する』ということを理解しました。ありがとうございました。

行動規範の内容に同意します

js
1while( divEle.length > cnt ) {
2		var random = Math.floor( Math.random() * 10 );
3		divEle[ cnt ].style.backgroundColor = colors[ random ];
4		cnt++;
5	}