まず、下のコードを写して動かしてみましょう。
HTMLタブに下のコードを貼り付けてください。
<button id="switch">スイッチを押せ</button>
<p id="message">魔法はまだかかっていない</p>
JSタブに下のコードを貼り付けてください。
const btn = document.querySelector('#switch');
const msg = document.querySelector('#message');
btn.addEventListener('click', function() {
msg.textContent = '魔法がかかった！';
});
ボタンをクリックして、文字が「魔法がかかった！」に変わることを確認してください。
動作が確認できたら、コードが何をしているか見ていきましょう。
<button id="switch">スイッチを押せ</button>
<p id="message">魔法はまだかかっていない</p>
id="switch" は「このボタンに switch という名札を貼る」という意味です。
id="message" は「この文章に message という名札を貼る」という意味です。
名札は後でJavaScriptから「あの名札のものを操作してほしい」と指定するために使います。
const btn = document.querySelector('#switch');
const msg = document.querySelector('#message');
document.querySelector('#switch') は「switch という名札が貼ってあるものを見つけて」という命令です。見つけたものを btn という名前で呼べるようにしています。
document.querySelector('#message') は「message という名札が貼ってあるものを見つけて」という命令です。見つけたものを msg という名前で呼べるようにしています。
HTMLとJSの対応関係はこうなっています：
<button id="switch"> ← 「switch」という名札を貼っている
<p id="message"> ← 「message」という名札を貼っている
querySelector('#switch') ← 「switch」という名札のものを探している
querySelector('#message') ← 「message」という名札のものを探している
btn.addEventListener('click', function() {
msg.textContent = '魔法がかかった！';
});
btn.addEventListener('click', ...) は「btn（ボタン）がクリックされたら、次のことをしてください」という約束をする命令です。
約束の中身は msg.textContent = '魔法がかかった！' で、「msg（文章）の文字を『魔法がかかった！』にしてください」という意味です。
ボタンを増やすには、HTMLとJSの両方にコードを追加する必要があります。
ポイント：名札は被ってはいけない
新しいボタンを追加するとき、名札（id）の名前は既存のものと被ってはいけません。JavaScriptが「どちらを操作すればいいか」わからなくなるためです。
ステップ1：HTMLに2つ目のボタンと文章を追加する
今あるHTMLの2行の下に、下の2行を追加してください。
<button id="switch2">2番目のスイッチ</button>
<p id="message2">まだ何も起きていない</p>
名札を switch2、message2 にしているのは、switch や message と被らないようにするためです。
ステップ2：JSに2つ目のボタンに対応するコードを追加する
今あるJSの最後の行（}); の下）に、下のコードを追加してください。
const btn2 = document.querySelector('#switch2');
const msg2 = document.querySelector('#message2');
btn2.addEventListener('click', function() {
msg2.textContent = '2番目の魔法がかかった！';
});
HTMLとJSの名札の対応を確認してください：
id="switch2" ↔ JS の querySelector('#switch2')id="message2" ↔ JS の querySelector('#message2')名札の名前が一致していれば、JavaScriptはちゃんと正しいボタンと文章を見つけられます。