Why is my onclick code working on double click during the first time?-CodePudding

I am writing a simple popup for my website build with Nextjs. It uses the onclick attribute. I am simply taking the id and checking if display property in CSS is none using if else. Accordingly I am setting display to none or block. It works fine, the only problem is when the page loads, for the first time, it takes two clicks.

Following in the code in Nextjs concerned to this issue that is working and I have tried. As described, for it to start working it takes two clicks. I want it to work in the first click itself. Url of the website - gurjotsinghdev.vercel.app Github Source code - https://github.com/gurjotsinghdev/gurjotsinghdev

let pokepop = () => {
    let pokepop = document.getElementById("pokepopboxid");
    if (pokepop.style.display == "none") {
        pokepop.style.display = "block";
      } else {
        pokepop.style.display = "none";
      }

}
export default function Header() {
    return (
        <>

            <div className={styles.header}>
                <h1 className={styles.logo}>
                    <Link href="/"><a>
                        <Image
                            src={logo}
                            alt="Picture of the author"
                            className={styles.logo}
                            width={80}
                            height={80}
                        />
                    </a></Link>
                </h1>
                <div className={styles.mainMenu}>
                    <Link href="/projects"><a>Projects</a></Link>
                    <Link href="/about"><a>About</a></Link>
                    <Link href="/blog"><a>Blog</a></Link>
                    <Link href="/">
                    <a onClick={() => pokepop()} >
                    <Image
                        src={pokeball}
                        alt="Picture of the author"
                        className={styles.pokeball}
                        width={40}
                        height={40}

                    /></a></Link>

                </div>
                <div id="pokepopboxid" className="pokepopbox">
                    <h2>My Pokemon</h2>
                    
                </div>
            </div >
        </>
    )
}

CodePudding user response：

let pokepop = () => {
    let pokepop = document.getElementById("pokepopboxid");
    // First click, pokepop.style.display = "";
    if (pokepop.style.display == "none") {
        pokepop.style.display = "block";
    } else {
        pokepop.style.display = "none";
    }
}

pokepop.style.display is an empty string on startup because it hasn't been set to anything, and the style property doesn't read the CSS values already there. This means that, on the first click, it goes into the else statement and sets the display to "none". Then, on the next click, the check pokepop.style.display == "none" passes because it was set to "none" the previous click.

A simple fix is to invert the check, check if pokepop.style.display == "block" and if so, set it to "none". Otherwise, set it to "block". This will cause the first click to set it to "block" rather than "none".

let pokepop = () => {
    let pokepop = document.getElementById("pokepopboxid");
    if (pokepop.style.display == "block") {
        pokepop.style.display = "none";
    } else {
        pokepop.style.display = "block";
    }
}