Javascript クリックイベント ボタンを押すとそれに応じたテキストが出る
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>あなたの手を決めてください</p>
<button id="gu">グー</button>
<button id="choki">チョキ</button>
<p>あなたの手は</p>
<p id="youHand"></p>
<script src="js/main.js"></script>
</body>
</html>
js
const gu = document.getElementById("gu");
const choki = document.getElementById("choki");
const youHand = document.getElementById('youHand');
gu.addEventListener('click',()=>{
youHand.textContent = 'グーです';
});
choki.addEventListener('click',()=>{
youHand.textContent = 'チョキです';
});
youHand.textContent = 'パーです';
});
ポイントは
addEventListener(引数1、引数2)
引数1をすると引数2の処理を行う