I'm trying to make a pagination and to achieve that I created a function createButtons() that dynamically creates buttons and displays them in a specific div .pagination-btns. And within that function, I created another function hideButtons() that takes the array of created buttons as parameter and then hides all the buttons except for five of them by adding a classlist of .hide. Unfortunately, when hideButtons() is called up console throws this error ''Cannot read properties of undefined (reading 'classList')'. I don't why this is happening. Plz, help me resolve this issue.

Here's the code:-

const totalBtn = 99;
const paginationBtns = document.querySelector('.pagination-btns');

createButtons();

function createButtons() {
  document.querySelector('.prev-btn').disabled = true;
  for (i = 1; i < totalBtn; i  ) {
    var btn = document.createElement('button');
    btn.innerText = `${i}`;
    btn.classList.add('page-btn');
    btn.classList.add('btn-style');
    var id = document.createAttribute('data-id');
    id.value = `${i}`;
    btn.setAttributeNode(id);
    paginationBtns.appendChild(btn);
  }
  const pageBtns = document.querySelectorAll('.pagination-btns button');
  hideButtons(pageBtns);
};

function hideButtons(btn) {
  for (var i = 1; i < totalBtn; i  ) {
    if (i > 4) {
      btn[i].classList.add('hide');
    }
  }
};

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'League Spartan', sans-serif;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 50px;
}

.pagination-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
}

.btn-style {
  font-size: 14px;
  font-weight: 600;
  padding: 15px 30px;
  color: #000;
  background-color: lightgray;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  outline: none;
  transition: 0.2s;
}

.hide {
  display: none;
}

.prev-btn:disabled {
  opacity: 0.5;
}

.next-btn:disabled {
  opacity: 0.5;
}

<div >
  <button type="button" >prev</button>
  <div >
  </div>
  <button type="button" >next</button>
</div>

CodePudding user response：

Your loop starts at 1 you end when you get to 99 so you are one short.

const totalBtn = 99;
const paginationBtns = document.querySelector('.pagination-btns');

createButtons();

function createButtons() {
  document.querySelector('.prev-btn').disabled = true;

  // changed
  for (var i = 0; i < totalBtn; i  ) {

    var btn = document.createElement('button');

    // changed
    btn.innerText = `${i   1}`;

    btn.classList.add('page-btn');
    btn.classList.add('btn-style');
    var id = document.createAttribute('data-id');

    // changed
    id.value = `${i   1}`;

    btn.setAttributeNode(id);
    paginationBtns.appendChild(btn);
  }
  const pageBtns = document.querySelectorAll('.pagination-btns button');
  hideButtons(pageBtns);
};

function hideButtons(btn) {

  // changed
  for (var i = 0; i < totalBtn; i  ) {
 
    if (i > 4) {
      btn[i].classList.add('hide');
    }
  }
};

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'League Spartan', sans-serif;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 50px;
}

.pagination-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
}

.btn-style {
  font-size: 14px;
  font-weight: 600;
  padding: 15px 30px;
  color: #000;
  background-color: lightgray;
  border-radius: 4px;
  cursor: pointer;
  border: none;
  outline: none;
  transition: 0.2s;
}

.hide {
  display: none;
}

.prev-btn:disabled {
  opacity: 0.5;
}

.next-btn:disabled {
  opacity: 0.5;
}

<div >
  <button type="button" >prev</button>
  <div >
  </div>
  <button type="button" >next</button>
</div>