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.

myfunc() executes the function immediately. myfunc passes a reference to the function, that will be executed whenever the event listener triggers. Besides, myfunc() returns nothing (undefined) so what your code actually does currently is equivalent to .addEventListener("click", undefined); myfunc(); — Jeremy Thille
– Jeremy Thille, Commented Jul 14, 2021 at 9:45
Thanks, the function is being called now everytime i click but now the problem is that the value of the elem variable is not changing, it's always 0, no matter how many times i click the button to invoke the function. @JeremyThille — BestCodingExpert
– BestCodingExpert, Commented Jul 14, 2021 at 10:12

michal.materowski · Accepted Answer · 2021-07-14 09:43:16Z

2

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);

answered Jul 14, 2021 at 9:43

michal.materowski

4473 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

BestCodingExpert Over a year ago

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

michal.materowski Over a year ago

There's a problem in your logic elem = !elem always set variable to false, that's why value is set to 0 in the next check.

BestCodingExpert Over a year ago

Oh ok, I thought it would work similar to C++ logical not operator. Anyway, thanks for the answer. I can use if-else statement instead of that 1 line

michal.materowski Over a year ago

No problem, happy to help. In the future try to debug your code with debugger statement or some other tool and make an effort to find out your mistakes on your own. That's the best way to learn!

BestCodingExpert Over a year ago

Sure, but actually there is still a problem in the code due to which it always remain 0. I am using alert statement instead of debugger for now because it is a very basic code.

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related