尝试使用 javascript addEventListener 更新 css 变量，但它只工作一次 [英] Trying to update css variable using javascript addEventListener, but it is working only once
问题描述
所以，我正在尝试使用 filter:invert(var(--variable-name)) 制作切换主题按钮，并且我正在使用 javascript 更新变量的值.我制作了一个按钮并添加了一个click"事件监听器，事件监听器中的函数更新了变量的值.但这只会发生一次(仅适用于第一次点击).好像事件监听器在那之后被删除了.我需要有关此代码的帮助:
Codepen 链接:https://codepen.io/xshubhamx/pen/rNmjvpw
document.getElementById("btn").addEventListener("click", myfunc);函数 myfunc() {让 root = document.documentElement;let elem = getComputedStyle(root).getPropertyValue("--numvar");if (elem == false || elem == 0) {元素 = 1;}else if (elem == true || elem == 1) {元素 = 0;}警报(元素)；root.style.setProperty("--numvar", elem);}:root{--numvar:1;}html{过滤器:反转(var(--numvar))；}身体 {背景:#000；}.外按钮{显示:内联块；高度:28px；宽度:28px；位置:相对；边距:0 3px；}.inner-button {显示:内联块；位置:绝对；宽度:100%；高度:100%；box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;边框半径:20px；背景:#f5f5f5；}跨度 {显示:内联块；垂直对齐:中间；}.status-text {白颜色;文本转换:大写；字体大小:11px；字体系列:Futura，无衬线；过渡:全0.2s缓动；}.滑动开关{高度:28px；宽度:72px；位置:相对；}.外开关盒{溢出:隐藏；高度:100%；宽度:100%；显示:内联块；边框半径:20px；位置:相对；box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px 白色；过渡:所有 0.3s 缓和；转换延迟:65ms；位置:绝对；z-索引:1；}.inner-switch-box {位置:相对；宽度:175px；过渡:所有 0.3s 缓和；}.switch-checkbox:checked + .outer-switch-box .unchecked-text {颜色:透明；}.switch-checkbox:not(:checked) + .outer-switch-box .checked-text {颜色:透明；}.switch-checkbox:checked + .outer-switch-box .inner-switch-box {左:20px；}.switch-checkbox:not(:checked) + .outer-switch-box .inner-switch-box {左:-27px；}.switch-checkbox:checked + .outer-switch-box {/* 背景图像:线性渐变(#b6d284，#b6d284)；*/背景:#b6d284；}.switch-checkbox:not(:checked) + .outer-switch-box {/* 背景图像:线性渐变(#cbcbcb，#dbdbdb)；*/背景:#dbdbdb;}[类型=复选框"] {边距:0；填充:0；外观:无；宽度:100%；高度:100%；边框:1px纯黑色；位置:绝对；顶部:0；左:0；z-索引:100；不透明度:0；}<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>我对括号感到抱歉，我删除了括号并添加了 alert(elem);在代码中，但正如您通过运行代码段所看到的那样，它无法正常工作.我的意思是正在调用函数，但变量的值始终保持为 0.
编辑 2:
谢谢大家，它现在工作得很好.我也更新了问题代码片段中的正确代码.
我相信您以错误的方式添加了侦听器.addEventListener 接受一个函数，你只是调用 myfunc()，而不是传递对它的引用
document.getElementById("btn").addEventListener("click", myfunc);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.
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);
这篇关于尝试使用 javascript addEventListener 更新 css 变量，但它只工作一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
