0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】ネコ泣いちゃったゲーム作ってみた(遊び)

Posted at

##ネコ泣いちゃったゲーム
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>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?