<div>
  <h1>button click alert</h1>
  <p>一つの場合(getElementById)</p>
  <button id="one_btn">alert</button>
  <hr>
  <p>三つの場合(getElementsByClassName,querySelectorAll等)</p>
  <p class="text-left">一つの時と同じように記述して動かなかった場合</p>
  <button class="three_btn">alert 1</button>
  <button class="three_btn">alert 2</button>
  <button class="three_btn">alert 3</button>
  <hr>
  <p>五つの場合(getElementsByClassName,querySelectorAll等)</p>
  <p class="text-left">複数取得してきているときは配列で取得しているんだと気付いた場合</p>
  <button class="fifth_btn">alert 1</button>
  <button class="fifth_btn">alert 2</button>
  <button class="fifth_btn">alert 3</button>
  <button class="fifth_btn">alert 4</button>
  <button class="fifth_btn">alert 5</button>
</div>
body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

.text-left {
  text-align: left;
}

button {
  padding: 4px 12px;
  border-radius: 10px;
  margin: 8px;
}
document.getElementsByTagName("h1")[0].style.fontSize = "2vw";

// ボタンが一つの場合
let oneBtn = document.getElementById("one_btn");

oneBtn.addEventListener("click",()=>{
  alert("clickされました");
})

// ===================================
// ボタンが三つの場合(エラーはいて動かなくるのでコメントアウトです)
// let threeBtn = document.getElementsByClassName("three_btn");
// threeBtn.addEventListener("click",()=>{
//   alert("clickされました");
// })
// ===================================

// ボタンが五つの場合
let fifthBtn = document.getElementsByClassName("fifth_btn");

for(let i = 0; i < fifthBtn.length; i++) {
    fifthBtn[i].addEventListener("click",()=>{
    alert("clickされました");
  })
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.