My issue involves using querySelectorAll('a') to select all buttons, but I only want to target two specific buttons labeled 'Know More'. How can I achieve this?
Below is the code snippet in question:
const buttons = document.querySelectorAll('a');
buttons.forEach(btn => {
btn.addEventListener('click', function(e) {
var totalOffsetX = 0; // X and Y COORDINATES WITH SCROLL START
var totalOffsetY = 0;
var X = 0;
var Y = 0;
var currentElement = this;
do {
totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
}
while (currentElement = currentElement.offsetParent)
X = e.pageX - totalOffsetX;
Y = e.pageY - totalOffsetY; // X and Y COORDINATES WITH SCROLL END
let ripples = document.createElement('buttonspan');
ripples.style.left = X + 'px';
ripples.style.top = Y + 'px';
this.appendChild(ripples);
setTimeout(() => {
ripples.remove()
}, 1000);
})
})<div class="buttons">
<a href="javascript:void(0)">Know More</a>
<a href="javascript:void(0)" class="button">Know More</a>
</div>