Кнопка волнового эффекта проблемы обновления значения InternalHTML ⇐ Javascript

[Anonymous]

Я хочу знать, почему значение не обновляется, я имею в виду, что сам прослушиватель события клика не выполняется
Если я удалю prevRippleEl.remove() line, то все работает нормально, эффект пульсации работает, а значение также увеличивается, поэтому я хочу знать, почему и как prevRippleEl.remove() вызывает проблему.
Имейте в виду, я мне не нужно это решение, оно у меня уже есть.

Код: Выделить всё

const ripple_span = document.createElement('span');
const link = document.getElementById('link');
const valueSpan = document.getElementById('value');
let value = 0
link.appendChild(ripple_span);
link.addEventListener('mousedown', (e) => {
createRipple(e);
});

function createRipple(e) {
const prevRipple = ripple_span.querySelector('.ripple_effect');
if (prevRipple) prevRipple.remove();
const rippleInnerSpan = document.createElement('span');
const targetElRect = link.getBoundingClientRect();
const diameter = Math.max(targetElRect.width, targetElRect.height);
const x = e.clientX - targetElRect.left;
const y = e.clientY - targetElRect.top;
rippleInnerSpan.style.top = `${y}px`;
rippleInnerSpan.style.left = `${x}px`;
rippleInnerSpan.classList.add('ripple_effect');
ripple_span.appendChild(rippleInnerSpan);
setTimeout(() => {
rippleInnerSpan.style.transform = `scale(${diameter * 2.5})`;
}, 0);

link.addEventListener('mouseup', () => {
rippleInnerSpan.style.opacity = '0';
});

}

link.addEventListener('click', () => {
value++;
valueSpan.innerHTML = value;
});

Код: Выделить всё

* {
font-family: sans-serif;
font-size: 1rem;
}

.ripple_effect {
position: absolute;
width: 1px;
height: 1px;
border-radius: 50%;
background-color: rgba(0, 92, 187, 0.3);
transform: scale(0);
transition: all 0.4s ease-in-out;
}

.ripple_targetEl {
display: inline-flex;
align-items: center;
background-color: transparent;
position: relative;
z-index: 10;
overflow: hidden;
text-decoration: none;
cursor: pointer;
color: rgb(0, 92, 187);
transition: all 0.1s ease-in-out;
}

.ripple_targetEl:hover {
background-color: rgba(0, 92, 187, 0.15);
}

a {
padding: 0.3rem 0.6rem;
border-radius: 10px;
}

Код: Выделить всё

[url=#]Click[/url]

Подробнее здесь: https://stackoverflow.com/questions/793 ... ect-button