javascript - 尝试使用 javascript addEventListener 更新 css 变量，但它只工作一次

Question

所以，我正在尝试使用 filter:invert(var(--variable-name)) 制作一个切换主题按钮，并且我正在使用 javascript 更新变量的值。我制作了一个按钮并添加了一个“click”事件监听器，事件监听器中的函数更新了变量的值。但这只会发生一次（仅适用于第一次点击）。好像事件监听器在那之后被删除了。我需要有关此代码的帮助：

Codepen 链接：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>

编辑：

我对括号感到抱歉，我删除了括号并添加了 alert(elem); 在代码中，但正如您通过运行代码段所看到的，它无法正常工作。我的意思是正在调用函数，但变量的值始终保持为 0。

编辑2：

谢谢大家，它现在工作得很好。我也更新了问题代码片段中的正确代码。

标签： javascripthtmlcssdomaddeventlistener

Answer 1

我相信您以错误的方式添加了侦听器。addEventListener 接受一个函数，而您只是调用 myfunc()，而不是传递对它的引用

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