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