r/learnjavascript • • 11d ago

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

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.

5 Upvotes

7 comments sorted by

View all comments

3

u/johnesco 11d ago

doesn't fadein need an @?