作品一覧に戻る
召喚を取り消せ

召喚を取り消せ

松谷一希 04/03 11:47
アプリを動かす
コードを見る
<!DOCTYPE html>
<html>
 <body>
  <button id="summonBtn">召喚!</button>
  <div id="stage"></div>
 </body>
</html>
const btn = document.querySelector('#summonBtn');
const stage = document.querySelector('#stage');

btn.addEventListener('click', function() {
  // 精霊を作る
  const spirit = document.createElement('p');
  spirit.textContent = '✨ 精霊が現れた!';

  // 削除ボタンを作る
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'グッバイ';

  // 削除ボタンを押したら、精霊ごと消える
  deleteBtn.addEventListener('click', function() {
    spirit.remove();
  });

  // 精霊の中に削除ボタンを入れて、舞台に出す
  spirit.appendChild(deleteBtn);
  stage.appendChild(spirit);
});