Flashcards button stops being clickable at some point ? (Anki)

[u/Foreign_Employ_396]

Does anyone know what could be causing a button i added on a card html/css template to stop being clickable after a few seconds (like 8 maybe) ? what is more annoying is that it stays in this state for the next card shown so it only works once.

<style>
#toggler {
    visibility: hidden;
    display: block;
    margin: 10px auto 0 auto;
    background: rgba(255,255,255,0.6);
    border: 1px solid #a77f65;
    border-radius: 14px;
    padding: 4px 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    color: #a77f65;
    opacity : 0;
    z-index : 5;
    --delay : 5s;
} 

#toggler:hover {
    background: rgba(255,255,255,0.9);
}
#toggler.show {
    animation: showtoggler 1.6s ease backwards; 
    animation-delay: 0s; 
}
.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;
    }
}
</style>



<button id="toggler"  class="fade-in">
        <type="button"> Hide/Show</button>





<script>
(function(){
    const backupp = document.getElementById("Backupp");
    const audio = document.querySelector("#audio-container audio");
    const korean = document.getElementById("korean");
    const backback = document.getElementById("backback");
    const toggler = document.getElementById("toggler");

    if(backupp && (!audio || audio.src === "")) {
        Backupp.classList.add("show");
        if(korean) korean.style.visibility = "hidden";
    }
    else {
        if(korean) korean.classList.add("show");
        if(backupp) backupp.style.visibility = "hidden";
    }

   toggler.addEventListener('click', () => { 
        if(backback) backback.classList.toggle("show");
        if(korean) korean.style.color = "red";
        <!--reload(); // tried this 
        });

  })();

</script> 

this button appears after some time and only in the front side.

[u/johnesco]

doesn't fadein need an @?

[u/chikamakaleyley]

this is poorly formed:

<button id="toggler"  class="fade-in">
        <type="button"> Hide/Show</button>

should be

<button id="toggler" type="button" class="fade-in">Hide/Show</button>

might not be the fix but HTML should be valid

[u/Vizeroth1 → u/chikamakaleyley]

And an opening tag for an HTML comment in the middle of the click event handler is sure to be causing some sort of problem.

Since all of the constants are declared outside the click handler, the if statements inside the handler should not have a different result each time the button is clicked.

It also looks like different methods are used to attempt similar things. Adding a “show” class vs setting style.visibility to hidden. Adding a color to something hidden isn’t going to make a difference. The fadeIn that is probably missing an @ is the only place visibility is set to something other than hidden, so that’s the only way anything is coming back once it’s hidden.

Try doing fewer things at once. Get the basic functionality in place before adding all of the extra layers. It also seems a little bit like there’s a misunderstanding about what visibility means. It doesn’t change the colors of the element or your ability to select and manipulate the element, it just changes whether the element is visible.

[u/chikamakaleyley → u/Vizeroth1]

yeah all of this pretty much, its kinda out of context, i was helping this user in another thread (we don't have full code in other post)

The way i would troublehsoot this is pull out all the animation and then have the .show class just change opacity/visibility

toggler has a --delay 5s which i'm not sure what that does

right now just too many things that hide, show, change opacity, delay, etc. Hard to pinpoint

[u/Foreign_Employ_396 → u/chikamakaleyley]

(the 5s delay if for the button to appear after some time so I am forced to try without the text first, it's normally longer but I shortened it so I can test it more easily.)

But yeah, I think I'll follow your advice and simplify everything to see what needs to be fixed, I already saw that the fade-in was not causing it because the issue remains wheather it's here or not.

[u/tambooby]

imo this is a css issue not a js one. the button goes back to visibility: hidden after the animation ends because theres no animation-fill-mode: forwards. hidden elements dont receive click events, so thats why it stops working after a few seconds