絵文字の軍団

「絵文字の軍団」

ミッション：ボタンを押すと、絵文字が10個いっきに横並びで現れる装置をつくろう！

コードを写そう

HTMLタブに下のコードを貼り付けてください。

<button id="btn">召喚</button>
<div id="stage"></div>

JSタブに下のコードを貼り付けてください。

const btn = document.querySelector('#btn');
const stage = document.querySelector('#stage');

btn.addEventListener('click', function() {
  for (let i = 0; i < 10; i++) {
    const emoji = document.createElement('span');
    emoji.textContent = '🌸';
    stage.appendChild(emoji);
  }
});

ボタンをクリックして、🌸が10個横並びで現れることを確認してください。

コードを読み解こう

p から span に変えた理由

「繰り返しの呪文」では createElement('p') を使いました。今回は createElement('span') を使っています。

p は段落を表すタグで、自動的に改行されるため縦に並びます。span は文章の一部を囲むタグで、改行されないため横に並びます。

横並びにしたいときは span を使います。

for 文の回数を変えると個数が変わる

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

10 を変えると出てくる個数が変わります。「繰り返しの呪文」との違いは、createElement の中身が span になり、出す数が10個になっただけで、for 文の仕組みは同じです。

改造しよう

ミッション①：絵文字を変えよう

emoji.textContent = '🌸';  ← ここを変える

好きな絵文字に変えてみましょう。

ミッション②：個数を変えよう

for (let i = 0; i < 10; i++) {  ← 「10」を変える

自己チェック

• [ ] ボタンを押すと絵文字が10個横並びで現れる
• [ ] span タグを使っている
• [ ] for 文を使っている