Javascript 用于更改定价的活动切换开关

我建立了一个页面，有三个付款计划。还有一个切换开关，可在

每月

和

每年

之间切换。我的价格设置为每月19.99美元，当我点击切换按钮切换到每年时，我希望价格更改为199.99美元。这是我到目前为止的代码。所有的HTML和CSS，所以现在我的JS不是为它工作。怎么了

函数myFunction（）{
var x=document.getElementsByClassName（“开关”）；
如果（x.innerHTML==“$19.99”）{
x、 innerHTML=“$199.99”；
}否则{
x、 innerHTML=“$19.99”；
}
}

input.cmn切换圆：选中+标签：之后{
左边距：32px；
}
.开关{
位置：相对位置；
左：47.5%；
}
.cmn开关{
位置：绝对位置；
左边距：-9999px；
可见性：隐藏；
}
.cmn切换+标签{
显示：块；
位置：相对位置；
光标：指针；
大纲：无；
用户选择：无；
}
input.cmn切换圆形+标签{
填充：2px；
宽度：50px；
高度：20px；
背景色：#dddddd；
边界半径：60px；
}
input.cmn切换圆形+标签：在，
input.cmn切换圆形+标签：之后{
显示：块；
位置：绝对位置；
顶部：1px；
左：1px；
底部：1px；
内容：“；
}
input.cmn切换圆形+标签：之前{
右：1px；
背景色：#f1f1；
边界半径：60px；
过渡：背景0.4s；
}
input.cmn切换圆形+标签：之后{
宽度：20px；
背景色：#fff；
边界半径：100%；
盒影：0 2px 5px rgba（0,0,0,0.3）；
过渡期：利润率0.4s；
}
input.cmn切换圆：选中+标签：之前{
背景图像：线性渐变（向左，hsl（236,72%，79%），hsl（237,63%，64%）
);
}

---

您的代码有几个问题。首先，将其与innerHTML属性进行比较，innerHTML属性最初未设置。只有在具有默认值时，该属性才能工作

下一步是要设置包装容器innerHTML，这将删除该按钮

在下面的解决方案中，我引入了一个初始值为199.95的段落，然后打开它

另外，我还替换了倾斜脚本，并使用了eventListener

let inp=document.getElementById（“cmn-toggle-1”）；
输入addEventListener（“单击”，myFunction）；
函数myFunction（）{
var x=document.getElementById（“par”）；
如果（x.innerHTML==“$199.99”）{
x、 innerHTML=“$19.99”；
}否则{
x、 innerHTML=“$199.99”；
}
}

input.cmn切换圆：选中+标签：之后{
左边距：32px；
}
.开关{
位置：相对位置；
左：47.5%；
}
.cmn开关{
位置：绝对位置；
左边距：-9999px；
可见性：隐藏；
}
.cmn切换+标签{
显示：块；
位置：相对位置；
光标：指针；
大纲：无；
用户选择：无；
}
input.cmn切换圆形+标签{
填充：2px；
宽度：50px；
高度：20px；
背景色：#dddddd；
边界半径：60px；
}
input.cmn切换圆形+标签：在，
input.cmn切换圆形+标签：之后{
显示：块；
位置：绝对位置；
顶部：1px；
左：1px；
底部：1px；
内容：“；
}
input.cmn切换圆形+标签：之前{
右：1px；
背景色：#f1f1；
边界半径：60px；
过渡：背景0.4s；
}
input.cmn切换圆形+标签：之后{
宽度：20px；
背景色：#fff；
边界半径：100%；
盒影：0 2px 5px rgba（0,0,0,0.3）；
过渡期：利润率0.4s；
}
input.cmn切换圆：选中+标签：之前{
背景图像：线性梯度（向左，hsl（236,72%，79%），hsl（237,63%，64%）；
}

199.99美元

刚刚阅读了关于使用代码操纵多个元素的价格的评论，您需要一种不同的方法，因为使用ID将不再有效-ID属性必须是唯一的，因此除非您对数字递增的索引等问题感到棘手（混乱）您可以检查任何

单击
事件（或其他类型）的
target
属性，并使用父/子/同级选择器来识别和操作感兴趣的节点

通过添加
dataset
属性并忽略存在的任何ID属性，对下面的HTML进行了轻微修改。为了便于展示，CSS被匆忙伪造了。。。。但我认为这表明你可能会这样做

将事件侦听器分配给每个父DIV（
.switch
），并使用
事件的
currentTarget
属性查找实际接收单击的标签。使用
parentNode
和
querySelector
的组合，我们可以识别使逻辑工作所需的节点


document.querySelectorAll（'div.switch'）.forEach（div=>{
div.addEventListener（'click'，e=>{
if（e.target===e.target.parentNode.lastElementChild）{
设span=e.target.parentNode.querySelector（'span'）；
document.documentElement.style.setProperty（'--currency'，'$'））
span.dataset.price=e.currentTarget.dataset.state==1？e.currentTarget.dataset.annual:e.currentTarget.dataset.month；
span.dataset.period=e.currentTarget.dataset.state==1？“每月：”：“每年：”；
span.dataset.currency=document.documentElement.style.getPropertyValue（'--currency'）；
e、 currentTarget.dataset.state=1—数字（e.currentTarget.dataset.state）；
}
})
})
input.cmn切换圆：选中+标签：之后{
左边距：32px；
}
.开关{
--左：47.5%；
位置：相对位置；
左：var（--左）；
保证金：1雷姆0 1.5雷姆0；
宽度：计算值（80%-var（--左））；
}
.cmn开关{
位置：绝对位置；
左边距：-9999px；
可见性：隐藏；
}
.cmn切换+标签{
显示：块；
位置：相对位置；
光标：指针；
大纲：无；
用户选择：无；
}
input.cmn切换圆形+标签{
填充：2px；
宽度：50px；
高度：20px；
背景色：#dddddd；
边界半径：60px；
}
input.cmn切换圆形+标签：在，
input.cmn切换圆形+标签：之后{
显示：块；
波西蒂