Почему некорректно раскрывается и скрывается окно?

Question

[Nicknick1]

Буду благодарен за разъяснение,

Не могу понять следующее:

1. Почему попап не раскрывается при первом клике?
2. Почему так много раз выполняются функции (практически удваивается кол-во кликов в консоли)?

<div class="popup">
        <h1>Hdshdh</h1>
        <span>fsdfsdf</span>
      </div>
<input type="button" onclick="test()" value="Открыть окно">

.popup {
  display: none;
}

.active {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background-color: burlywood;
}

input {
  margin-top: 100px;
}

function test() {
    let btn = document.querySelector('input');
    let pp = document.querySelector('.popup');
    let active = document.querySelector('active');

    btn.addEventListener('click', function () {
        pp.classList.toggle('active');
        console.log('click');

        if (pp.classList.contains('active')) {
            window.addEventListener('dblclick', function () {
             pp.classList.remove('active');
             console.log('click_1');
            })
        }
    })
    }

Comments

[v3shin]

Ого, вы на каждом клике навешиваете еще один обработчик клика? А в обработчике клика довешиваете еще один обработчик двойного клика? А зачем?

[Nicknick1]

v3shin, не подумал, спасибо