Почему событие onclick отрабатывает один раз?

Question

[Huntgold]

При нажатии на button скрипт отрабатывает. При повторном нажатии скрипт не срабатывает.

let stock = document.querySelectorAll('.photo-details')[0].innerHTML;

  document.querySelectorAll('.desc')[0].onclick = () => {
    if (document.querySelectorAll('.desc')[0].classList.contains("active")){
      document.querySelectorAll('.desc')[0].classList.remove("active");
      document.querySelectorAll('.photo-details')[0].style.height = "400px";
      document.querySelectorAll('.photo-details')[0].style.overflow = "none";
      document.querySelectorAll('.photo-details')[0].innerHTML = stock;
    } else {
    document.querySelectorAll('.desc')[0].classList.add("active");
    document.querySelectorAll('.photo-details')[0].style.height = "550px";
    document.querySelectorAll('.photo-details')[0].style.overflow = "auto";
    document.querySelectorAll('.photo-details')[0].innerHTML += 'Work';}
    }

Comments

[Сергей Сергей]

desk не внутри photo-details?

[Huntgold]

Сергей Сергей, Внутри

[Сергей Сергей]

Значит, имеющийся desk уничтожается со своим onclick-ом из-за присваивания в innerHTML.
Требуемые действия лучше делать через присвоение и удаление стилизующих классов, в том числе включающих сокрытие и отображение блоков.

[Huntgold]

Сергей Сергей, тут же нет никакого влияния на desk

[Andrew]

Huntgold, разметку покажите, а лучше закиньте в какую-то песочницу всё сразу

[Сергей Сергей]

Почему?
Можно испытать догадку, если в stock записать любую случайную строку.

[Huntgold]

<div class="photo-details">
<div class="group-container">
<div class="multi-button skin1">
<button class="desc">Description</button>
</div></div>

Answer 1

[Сергей Соколов]

Срабатывает только раз потому, что в обработчике заменяется innerHTML. При этом теряются все слушатели событий: новая разметка, всё новое — надо заново вешать обработчики. Либо слушать события выше.

p.s. где-то плачет-рыдает принцип DRY (Don't Repeat Yourself — Не Повторяй Себя). Все куски кода, что повторяются — в переменную / константу.