почему не работает onclick второй раз на js

Question

почему не работает onclick второй раз на js

Рейтинг: 0Ответов: 3Опубликовано: 13.07.2023

html

<div class="pagination" id="pag">
            <button class="pag" id="pag1">1</button>
            <button class="pag now" id="pag2">2</button>
        </div>

js

let pag = document.getElementById("pag");
let pag1 = document.getElementById("pag1");
let pag2 = document.getElementById("pag2");

pag1.onclick = () => {
    pag.innerHTML = '<button class="pag now" id="pag1">1</button> <button class="pag" id="pag2">2</button>';
};
pag2.onclick = () => {
    pag.innerHTML = '<button class="pag" id="pag1">1</button> <button class="pag now" id="pag2">2</button>';
};

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 1

Если я правильно понял задачу, можно сделать так

...
pag1.onclick = (e) => {
    pag2.classList.remove("now");
    e.target.classList.add("now");
}
pag2.onclick = (e) => {
    pag1.classList.remove("now");
    e.target.classList.add("now");
}
...

Answer 2

▲ 1

почему не работает onclick второй раз

Потому что на новых элементах уже нет обработчиков...

Answer 3

▲ 1

После удаления элементов, все обработчики, связанные с ними, удаляются. Для создания обработчиков для новых элементов(даже с теми же ID), потребуется их заново инициализировать(установить).

Для небольших приложений, предложу вариант:
Создайте функцию обработчик и сразу добавляйте ее в разметку элемента

const pag = document.getElementById("pag");

const click1 = () => {
  console.log('Click1');
  pag.innerHTML = '<button class="pag now" id="pag1">1</button> <button class="pag" id="pag2">2</button>';
}

const click2 = () => {
  console.log('Click2');
  pag.innerHTML = '<button class="pag" id="pag1">1</button> <button class="pag now" id="pag2">2</button>';
}

<div class="pagination" id="pag">
  <button class="pag" id="pag1">1</button>
  <button class="pag now" id="pag2">2</button>
</div>

Либо можно создать универсальные функции, которые будут возвращать нужные кнопки с уже установленными обработчиками

const pag = document.getElementById("pag");
// Обработчик клика
const btnClick = (bType) => {
  pag.innerHTML = '';
  pag.appendChild(createBtn(bType, 1));
  pag.appendChild(createBtn(!bType, 2));
  console.log(bType); // Для демонстрации
}
// Создает кнопку с обработчиком
const createBtn = (btnType, order) => {
  const btn = document.createElement('button');
  btn.classList.add('pag');
  if (!btnType) btn.classList.add('now');
  btn.id = `pag${order}`;
  btn.innerText = order;
  btn.onclick = () => btnClick(order === 1);
  return btn;
}
// Первый рендер кнопок
btnClick(false);

<div class="pagination" id="pag">
</div>

почему не работает onclick второй раз на js

Ответы