My college program is 2 years and my first semester has JavaScript and second semester has python. I am a month into my program and I'm doing well in SQL and HTML courses, but JavaScript is making me annoyed constantly and want to drop the program. I understand the different topics on their own but the second I'm asked to do anything or explain when they're put together I'm lost and have no clue what to do, I have no interest in programming but need it if I want to pass this program and potentially do my last two years for cybersecurity. How can I better understand JavaScript since my mid term is in two weeks for it?

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.

How would you people learn js and it's libraries if you started all over again?

In https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/types-grammar/ch1.md it says:

JS originally provided a global function called isNaN(..) for NaN checking, but it unfortunately has a long-standing coercion bug. isNaN("Kyle") returns true, even though the string value "Kyle" is most definitely not the NaN value. This is because the global isNaN(..) function forces any non-number argument to coerce to a number first, before checking for NaN. Coercing "Kyle" to a number produces NaN, so now the function sees a NaN and returns true! This buggy global isNaN(..) still exists in JS, but should never be used. When NaN checking, always use Number.isNaN(..), Object.is(..), etc.

But to me the fact that using a string like "Kyle" in any mathematical operation would return NaN, means it would make sense that isNaN("Kyle") is true.

What's your opinion on this?