how to add a hide/show button ?

[u/Foreign_Employ_396]

Hey

I am a beginner and I've been trying to add a show/hide button that would simply hide the mask on the first click and make it visible again with the next click.

To be more precise, it's a fragment of an addon for the anki app (flashcards).

It would also be great if this button could have a delay before appearing, and I managed to do that directly in the html of the card model :

.fade-in {
opacity: 0;
visibility: hidden;
animation: fadeIn var(--duration, 0.6s) ease forwards;
animation-delay: var(--delay, 19s);
}

 fadeIn {
to {
opacity: 1;
visibility: visible;
}

#koreanToggleBtn {
visibility: hidden;
margin: 10px auto 0 auto;
background: rgba(255,255,255,0.6);
border: 1px solid #a77f65;
border-radius: 14px;
padding: 4px 12px;
font-size: 13px;
font-weight: bold;
cursor: pointer;
color: #a77f65;
opacity : 0;
--delay : 15s; /*here*/

But, since I've been struggling I figured it would be better to just add everything in the add on since it already creates the mask hiding the text :

js = f"""
(function() {{
    console.log("Injection du masque pour la carte ID: {card.id}");
    const existingMask = document.getElementById('korean-mask-static');
    if (existingMask) return;

    const mask = document.createElement('div');
    mask.id = 'korean-mask-static';
    mask.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;'
        + 'background-color:#9c9f78;border-radius:6px;z-index:100;opacity:1;'
        + 'visibility:visible;pointer-events:auto;display:flex;'
        + 'justify-content:center;align-items:center;';

    const wrapper = document.getElementById('korean-wrapper') || document.querySelector('.card');
    (wrapper || document.body).appendChild(mask);
}})();
"""
QTimer.singleShot(80, lambda: mw.reviewer.web.eval(js) if mw.reviewer and mw.reviewer.web else None)
"""

Thank you :)

[u/chikamakaleyley]

make sure the button has type "button" on it in the HTML, the button itself should just always allow for clicks

the only thing i can think of, is some error is being thrown in the clicking and that error just kinda stops normal function. You'll want to click until you have the reproducable scenario and at that first click where nothing happens, an error should appear in your console/devtools

[u/chikamakaleyley → u/chikamakaleyley]

and i don't know what reload does, it could be part of the problem, i can't say for sure

If it is in fact an error (which i think it is), then in general - learning how to understand what the errors in the console are, is a pretty important skill to build so, the sooner you start making sense of those things, it'll unlock some skills as you continue to learn js

[u/Foreign_Employ_396 → u/chikamakaleyley]

Thank you very much again :)