I’ve made 2 popup div in react. On the first page load, first popup is visible but i’ve set the opacity of second popup to 0. I’m handling this with a class ‘hide’. And i’m placing this hide class on the second popup based on a state. What i’m trying to achieve here is that i want to select a button having a class of ‘evil-btn’ that is present on the second popup. And add some event listeners to that button. But i’m not able to select that button, as a global variable. It’s returning null. So can anyone suggest me a way how i can select this button in the global scope..?? Below is the code for my Popup component.
import React, { useEffect, useRef, useState } from "react"
function Popup() {
const [isSecondActive, setIsSecondActive] = useState(false)
const [firstBtn, setFirstBtn] = useState(true)
const [secondBtn, setSecondBtn] = useState(false)
const container2_ref = useRef(null)
console.log(container2_ref)
const OFFSET = 100
const handleMouseOver = (e) => {
console.log(e.target.innerText)
if (e.target.innerText === "NO") {
setFirstBtn(!firstBtn)
setSecondBtn(!secondBtn)
}
}
const handleClick = (e) => {
console.log(e.target.innerText)
if (e.target.innerText === "YES") {
alert("I Knew You Were Dumb!!")
}
}
const handleSecondClick = (e) => {
console.log(e.target.dataset.name)
if (e.target.innerText === "YES") {
alert("I Knew You Were Dumb!!")
}
if (e.target.innerText === "NO") {
alert(
"I hate you, you clicked me so hard, I'm going and closing this window"
)
// window.close()
}
}
var evilBtn = document.querySelector(".evil-btn")
document.addEventListener("mouseover", (e) => {
const x = e.pageX
const y = e.pageY
const buttonBox = evilBtn.getBoundingClientRect()
// console.log("x", x)
// console.log("y", y)
let horizontalDistanceFrom = distanceFromBtn(
buttonBox.x,
x,
buttonBox.width
)
let verticalDistanceFrom = distanceFromBtn(buttonBox.y, y, buttonBox.height)
const verticalOffset = buttonBox.height + OFFSET / 2
const horizontalOffset = buttonBox.width + OFFSET / 2
if (
Math.abs(
horizontalDistanceFrom <= horizontalOffset &&
Math.abs(verticalDistanceFrom <= verticalOffset)
)
) {
setButtonPosition(
buttonBox.x + (horizontalOffset / horizontalDistanceFrom / 2) * 10,
buttonBox.y + (verticalOffset / verticalDistanceFrom / 2) * 10
)
}
})
const setButtonPosition = (left, top) => {
console.log(evilBtn)
evilBtn.style.left = `${left}px`
evilBtn.style.top = `${top}px`
}
const distanceFromBtn = (buttonPosition, mousePosition, buttonSize) => {
return buttonPosition - mousePosition + buttonSize / 2
}
return (
<div className='container'>
<div className='popup'>
<section className='section-top'>
{/* CONTAINER 2 START */}
{
<div
ref={container2_ref}
className={`container second-container container-2 ${
isSecondActive ? "" : "hide"
}`}
>
<div className='popup'>
<section className='section-top'>
<button
onClick={() => setIsSecondActive(false)}
className='close-btn'
>
X
</button>
</section>
<section className='section-middle'>
<h2 className='heading-msg'>
Do you really want to quit? But first tell me are you
dumb..??
</h2>
</section>
<div className='btn-containers'>
<button
data-name='second-yes'
onClick={handleSecondClick}
className='btn yes-2'
>
YES
</button>
<button
data-name='second-no'
onClick={handleSecondClick}
className='btn no-2 evil-btn'
>
NO
</button>
</div>
</div>
</div>
}
{/* CONTAINER 2 END */}
<button onClick={() => setIsSecondActive(true)} className='close-btn'>
X
</button>
</section>
<section className='section-middle'>
<h2 className='heading-msg'>Are You Dumb..??</h2>
</section>
<div className='btn-container'>
<button
onClick={handleClick}
onMouseOver={handleMouseOver}
data-name='first-yes'
className='btn yes-1'
>
{firstBtn ? "YES" : "NO"}
</button>
<button
onClick={handleClick}
onMouseOver={handleMouseOver}
data-name='first-no'
className='btn no firstNo'
>
{secondBtn ? "YES" : "NO"}
</button>
</div>
</div>
</div>
)
}
export default Popup
