JavaScriptを学ぶ④（divを少し増やす⇒１００個増やす）


<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/e7d1aa4a-48c7-6917-a9bf-887bc4bbe441.gif">

次は、divを増やして、３つに増やしただけです。
３つだけなら、手作業で増やせますが、１００個ともなると、
手作業では厳しいので、関数を使っていきます(^^)
以下は、３個のときのコードです♪

```html
  <body>
<div id="target1" class="box"></div>
<div id="target2" class="box"></div>
<div id="target3" class="box"></div>

<script>
  'use strict';
  const hitokage1 = document.getElementById('target1');
  const hitokage2 = document.getElementById('target2');
  const hitokage3 = document.getElementById('target3');

  hitokage1.addEventListener('click',function(){
     hitokage1.classList.toggle('circle')
  });
  hitokage2.addEventListener('click',function(){
     hitokage2.classList.toggle('circle')
  });
  hitokage3.addEventListener('click',function(){
     hitokage3.classList.toggle('circle')
  });
</script>
</body>
```
```css
body{
  display:flex;
  flex-wrap:wrap;
}
.box{
  width:100px;
  height:100px;
  background:skyblue;
  cursor:pointer;
  transition:0.8s;
  margin: 0 8px 8px 0;
}
.circle{
  background:pink;
  border-radius:50%;
  transform:rotate(360deg);
}
```
#createElement ＋ appendChild　のコンボ

```html
<script>
  'use strict';

  const rizard = document.createElement('div');
  rizard.classList.add('box');
  rizard.addEventListener('click',function(){
  rizard.classList.toggle('circle');
  });

  document.body.appendChild(rizard);
</script>
```
①divをデータ上、リザードという名前で作ったよ～
②そこにCSSのboxクラスを追加したよ～
③さらに、クリックしたらCSSのサークルクラスが適応されるよ～（トグル）

というイメージで良いでしょう:point_up_tone1:

ここで、③の形をイメージしやすくなるように、文法のようにしてまとめ！


Ａ.addEventListener('〇〇',function(){
Ａ(Ａ以外も可).classList.toggle('△△')

「Ａを〇〇したときのイベント追加⇒評価対象Ａ(Ａ以外にもできる）にCSSで△△クラスをトグル追加。」
⇒頭の中がスッキリしました(^^)


`const rizard = document.createElement('div');`
createElement('〇〇')`は、
名前から推測できると思いますが、エレメント(オブジェクト)を生成します。
ここでのエレメントというのは、HTMLのタグのことです。
div以外にもimgやh1・pなど、色々と作れます。
〇〇の部分に入力して作ります:relaxed:

createElementで作ったエレメント(オブジェクト)は、
`appendChild`で適用(表示を反映)することができます。
※逆にremoveChildで消すことも可能です。

これを書かないと、データ上は存在することになるが、
出力はされないということになるんですね(^^)

＜実験失敗＞
この、createElementは定数で指定して使うことがオーソドックス。
というか、定数を使わずに表示できないかいくつか試しましたがダメでした(´;ω;｀)

#for文で９９個操作のくり返し

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/12091571-1f4e-0d1d-1ae8-9ec212126b29.gif">

```html
<script>
  'use strict';
for (let i = 0; i < 100; i++){
  const rizard = document.createElement('div');
  rizard.classList.add('box');
  rizard.textContent = i;
  rizard.addEventListener('click',function(){
    rizard.classList.toggle('circle');
  });
  document.body.appendChild(rizard);
}
</script>
```
`for (let i = 0; i < 100; i++){`
という部分で、0～99回の合計100回の操作を繰り返しています♪
あとは、
`rizard.textContent = i;`という表記で、テキストを入力し、

CSSでtext-align:center とline-hieghtをhieghtと揃えて、
中央ぞろえにしています(^^)

```css
body{
  display:flex;
  flex-wrap:wrap;
}
.box{
  width:100px;
  height:100px;
  background:skyblue;
  cursor:pointer;
  transition:0.8s;
  margin: 0 8px 8px 0;
  text-align:center;
  line-height: 100px;
}
.circle{
  background:pink;
  border-radius:50%;
  transform:rotate(360deg);
}
```
あ～(´;ω;｀)
`display:flex;`
`flex-wrap:wrap;`
についても、色々と試してまとめないと……。
やることは大量ですが、少しずつアウトプット量を増やしていきます(^^)
それでは、今回はこのへんで～♪