ネコ泣いちゃったゲーム

MDNサイトの学習に沿って、オリジナルの簡単な動作物を作成しました。

※MDNサイト↓
https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript

HTML

<body>
  <h1>ネコの鳴き声</h1>
  <button id = btn1>ネコの鳴き声1</button>
  <button id = btn2>ネコの鳴き声2</button>
  <button id = btn3>削除</button>
</body>

JavaScript

<script>
//①DOM操作
const btn1 = document.getElementById("btn1");
const btn2 = document.getElementById("btn2");
const btn3 = document.getElementById("btn3");

//②メソッドの作成。
//HTML内に要素を生成して、その中に"にゃん"を追加する機能
function createPara1(){
  const Para = document.createElement("p");
  Para.textContent = "にゃん";
  document.body.appendChild(Para);
}

//HTML内に要素を生成して、その中に"にゃ〜〜ん"を追加する機能
function createPara2(){
  const Para = document.createElement("p");
  Para.textContent = "にゃ〜〜ん";
  document.body.appendChild(Para);
}

//追加したParaを一つずつ削除する機能
function deletePara(){
  const element = document.querySelector("p");
  element.remove();
}

//③クリックした時にイベント発生
btn1.addEventListener("click",createPara1);
btn2.addEventListener("click",createPara2);
btn3.addEventListener("click",deletePara);

</script>