Trying to update css variable using javascript addEventListener, but it is working only once

Question

So, I'm trying to make a switch theme button using filter:invert(var(--variable-name)) and I'm updating the value of the variable using javascript. I have made a button and added an event Listener of "click"and the function in event listener updates the value of the variable. But this is happening only once (only for the first click). As if the event Listener is getting deleted after that. I need help with this code:

Codepen Link: https://codepen.io/xshubhamx/pen/rNmjvpw

 document.getElementById("btn").addEventListener("click", myfunc); function myfunc() { let root = document.documentElement; let elem = getComputedStyle(root).getPropertyValue("--numvar"); if (elem == false || elem == 0) { elem = 1; } else if (elem == true || elem == 1) { elem = 0; } alert(elem); root.style.setProperty("--numvar", elem); }

 :root{ --numvar:1; } html{ filter: invert(var(--numvar)); } body { background: #000; } .outer-button { display: inline-block; height: 28px; width: 28px; position: relative; margin: 0 3px; } .inner-button { display: inline-block; position: absolute; width: 100%; height: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white; border-radius: 20px; background: #f5f5f5; } span { display: inline-block; vertical-align: middle; } .status-text { color: white; text-transform: uppercase; font-size: 11px; font-family: Futura, sans-serif; transition: all 0.2s ease; } .sliding-switch { height: 28px; width: 72px; position: relative; } .outer-switch-box { overflow: hidden; height: 100%; width: 100%; display: inline-block; border-radius: 20px; position: relative; box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white; transition: all 0.3s ease; transition-delay: 65ms; position: absolute; z-index: 1; } .inner-switch-box { position: relative; width: 175px; transition: all 0.3s ease; } .switch-checkbox:checked + .outer-switch-box .unchecked-text { color: transparent; } .switch-checkbox:not(:checked) + .outer-switch-box .checked-text { color: transparent; } .switch-checkbox:checked + .outer-switch-box .inner-switch-box { left: 20px; } .switch-checkbox:not(:checked) + .outer-switch-box .inner-switch-box { left: -27px; } .switch-checkbox:checked + .outer-switch-box { /* background-image: linear-gradient(#b6d284, #b6d284); */ background: #b6d284; } .switch-checkbox:not(:checked) + .outer-switch-box { /* background-image: linear-gradient(#cbcbcb, #dbdbdb); */ background: #dbdbdb; } [type="checkbox"] { margin: 0; padding: 0; appearance: none; width: 100%; height: 100%; border: 1px solid black; position: absolute; top: 0; left: 0; z-index: 100; opacity: 0; }

 <div class="sliding-switch"> <input type="checkbox" id="btn" class="switch-checkbox"/> <div class="outer-switch-box"> <div class="inner-switch-box"> <span class="status-text checked-text">on</span> <span class="outer-button"> <span class="inner-button"></span> </span> <span class="status-text unchecked-text">off</span> </div> </div> </div>

EDIT:

I'm sorry about the parentheses, I removed the parentheses and added alert(elem); in the code but as you can see by running the snippet, it is not working properly. I mean the function is being called but the value of the variable always remain 0.

EDIT 2:

Thanks guys, it is working perfectly now. I have updated the correct code in the question's code snippet too.

Answer 1

I believe you've added a listener in a wrong way. addEventListener accepts a function and You're just invoking myfunc(), instead of passing a reference to it

    document.getElementById("btn").addEventListener("click", myfunc);