英文:
Why is my onclick code working on double click during the first time?
问题
我正在为使用Nextjs构建的网站编写一个简单的弹出窗口。它使用了onclick属性。我只是获取id并检查CSS中的display属性是否为none，然后使用if else来相应地设置display为none或block。它运行正常，唯一的问题是当页面加载时，第一次需要点击两次。
以下是与此问题相关的Nextjs代码，它是有效的，我已经尝试过。如上所述，为了使其开始工作，需要点击两次。我希望它能在第一次点击时就能工作。
网站的URL - gurjotsinghdev.vercel.app
Github源代码 - 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="作者图片"
className={styles.logo}
width={80}
height={80}
/>
</a></Link>
</h1>
<div className={styles.mainMenu}>
<Link href="/projects"><a>项目</a></Link>
<Link href="/about"><a>关于</a></Link>
<Link href="/blog"><a>博客</a></Link>
<Link href="/">
<a onClick={() => pokepop()}>
<Image
src={pokeball}
alt="作者图片"
className={styles.pokeball}
width={40}
height={40}
/>
</a>
</Link>
</div>
<div id="pokepopboxid" className="pokepopbox">
<h2>我的宝可梦</h2>
</div>
</div>
</>
)
}
英文:
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 >
</>
)
}
答案1
得分: 0
let pokepop = () => {
let pokepop = document.getElementById("pokepopboxid");
if (pokepop.style.display == "block") {
pokepop.style.display = "none";
} else {
pokepop.style.display = "block";
}
}
英文:
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";
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论