【JavaScript】繰り返し処理を行いたい

繰り返し処理を行う方法の1つにfor文があります。

for文の書き方の一例としては、

for(let i = 0; i < 10 ; i ++){

// 繰り返し行いたい処理

};

という書き方になります。

for文の中で指定した「i」が0から9になるまで、繰り返し行いたい処理を行うという操作になります。

以下がfor文を使って前回まで行ってきた処理を繰り返す際の記述です。

'use strict';

for(let i = 0 ; i < 100 ; i ++){
const div = document.createElement('div');
// divの中にiを追加
div.textContent = i;　★
div.classList.add('box');
div.addEventListener('click', function(){
  div.classList.toggle('circle');
});

document.body.appendChild(div);
};

またCSS部分を整えます。

body{
  display: flex;
  flex-wrap: wrap;
}

.box{
  width: 100px;
  height: 100px;
  background: skyblue;
  cursor: pointer;
  transition: 0.8s;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: center;　★
  line-height: 100px;　★
}

.circle{
  border-radius: 50%;
  background-color: pink;
  transform: rotate(360deg);
}

これで以下のような画面になるはずです。

textContentについて

先ほどのjavascriptの中に

div.textContent = i;　★

というものがありました。

これは、

Node.textContent プロパティは、ノードおよびその子孫のテキスト内容を表します。
引用：
Node.textContent - Web API | MDN

とのことで、簡単に言えば要素の中にテキストを追加できるものです。

ちなみにCSSの

  text-align: center;
  line-height: 100px;

は、textContentで追加した「i」をdivの中央に配置できるように調節しているものです。