<body>
  <span class="monitor"></span>

  <section class="pagination">
    <button type="button" data-type="0">0</button>
    <button type="button" data-type="1">1</button>
    <button type="button" data-type="2">2</button>
    <button type="button" data-type="3">3</button>
    <button type="button" data-type="4">4</button>
    <button type="button" data-type="5">5</button>
    <button type="button" data-type="6">6</button>
    <button type="button" data-type="7">7</button>
    <button type="button" data-type="8">8</button>
    <button type="button" data-type="9">9</button>
  </section>
</body>
body {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.monitor {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1em;
}

button[type="button"] {
  padding: 0.6em 1.2em;

  background-color: #059669;
  color: white;
  border: 0;
  border-radius: 4px;
  font-weight: bold;

  transition: all 0.4s;

  cursor: pointer;
}

button[type="button"]:hover {
  background-color: #047857;
}

(() => {
  const $monitor = document.querySelector(".monitor");
  const $pagination = document.querySelector(".pagination");

  $pagination.addEventListener("click", (e) => {
    if (!(e.target instanceof HTMLButtonElement)) return;

    $monitor.innerText = e.target.dataset.type + "번 클릭";
  });
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.