Home How can I select all of the elements in the Bootstrap pagination code with JavaScript?

Questions

How can I select all of the elements in the Bootstrap pagination code with JavaScript?

April 26, 2023

I’m using Bootstrap for a website I’ve prepared. Since the overflow scroll bar looks bad, I have hidden it with CSS and I am trying to scroll the pagination with the mouse wheel via JavaScript.

When I use the code given below, the top one works, but the bottom one does not. When I give [0,1] as the index value in JavaScript code, this time the bottom one works but the top one doesn’t. How can I make it work on two pagination in the same page? As I learned from my research, I may need to use let or var variables instead of const.

const container = document.querySelectorAll(".table-responsive")[0];
container.addEventListener("wheel", function (e) {
  if (e.deltaY > 0) {
    container.scrollLeft += 100;
    e.preventDefault();
  } else {
    container.scrollLeft -= 100;
    e.preventDefault();
  }
});

.table-responsive::-webkit-scrollbar {
  width: 0 !important;
}

.content {
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <title>Hello, world!</title>
</head>
<br>
<br>

<body>
  <div class="container">
    <nav aria-label="Page navigation example" class="table-responsive">
      <ul class="pagination justify-content-between pagination-md">
        <li class="page-item m-1 active"><a class="page-link" href="#">1</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">2</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">3</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">4</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">5</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">6</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">7</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">8</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">9</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">10</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">11</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">12</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">13</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">14</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">15</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">16</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">17</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">18</a>
        </li>

      </ul>
    </nav>
    <div class="content">
      Some Page Content
    </div>

    <nav aria-label="Page navigation example" class="table-responsive">
      <ul class="pagination justify-content-between pagination-md">
        <li class="page-item m-1 active"><a class="page-link" href="#">1</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">2</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">3</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">4</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">5</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">6</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">7</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">8</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">9</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">10</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">11</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">12</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">13</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">14</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">15</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">16</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">17</a>
        </li>
        <li class="page-item m-1"><a class="page-link" href="#">18</a>
        </li>

      </ul>
    </nav>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>

</body>

</html>

>Solution :

You can use querySelectorAll to get all of the elements with that class and then loop through them to add an event listener to each one.

const containers = document.querySelectorAll(".table-responsive");
containers.forEach(container => {
  container.addEventListener("wheel", function (e) {
    if (e.deltaY > 0) {
      container.scrollLeft += 100;
      e.preventDefault();
    } else {
      container.scrollLeft -= 100;
      e.preventDefault();
    }
  });
});