Javascript:按钮的切换无法正常工作

我对Vue和Javascript基本上是新手。我有两个按钮，点击时可以改变背景颜色。我添加了一些Javascript代码，使它们切换，但问题是，当选择“免费”按钮时，背景会改变，但当选择“付费”按钮时，背景不会改变

如果有人能帮忙，我将不胜感激

function changeType(type) {
  var element = document.getElementById("myDIV");
  element.classList.toggle("active");
}

下面是我试图做的代码笔

---

非常感谢

编辑：将函数changeType更改为在两个按钮之间切换。还向按钮添加了类按钮

您应该将事件参数传递给函数并切换event.target类

<button class="buttonCloserGreen button" onclick="changeType(event)">
   Free
</button>

<button class="buttonCloserBlue button" onclick="changeType(event)">
   Paid
</button>

自由的
支付

然后访问changeType中的目标元素：

 function changeType(e) {
    let btns = document.getElementsByClassName('button')
    for(let i = 0; i < btns.length; i++) {
         btns[i].classList.remove("active")
    }
    e.target.classList.toggle("active");
 }

功能变更类型（e）{
设btns=document.getElementsByCassName（'按钮'）
对于（设i=0；i

---

编辑：将函数changeType更改为在两个按钮之间切换。还向按钮添加了类按钮

您应该将事件参数传递给函数并切换event.target类

<button class="buttonCloserGreen button" onclick="changeType(event)">
   Free
</button>

<button class="buttonCloserBlue button" onclick="changeType(event)">
   Paid
</button>

自由的
支付

然后访问changeType中的目标元素：

 function changeType(e) {
    let btns = document.getElementsByClassName('button')
    for(let i = 0; i < btns.length; i++) {
         btns[i].classList.remove("active")
    }
    e.target.classList.toggle("active");
 }

功能变更类型（e）{
设btns=document.getElementsByCassName（'按钮'）
对于（设i=0；i

---

您可以执行以下操作：

<button class="buttonCloserGreen" onclick="changeType(0)" id="myDIV0">
Free
</button>

<button class="buttonCloserBlue" onclick="changeType(1)" id="myDIV1">
Paid
</button>

---

您可以执行以下操作：

<button class="buttonCloserGreen" onclick="changeType(0)" id="myDIV0">
Free
</button>

<button class="buttonCloserBlue" onclick="changeType(1)" id="myDIV1">
Paid
</button>

---

我已经传递了完整的元素，因此您不必使用ID/Class

函数变更类型（元素）{
元素.classList.toggle（“活动”）；
}

.buttonCloserGreen{
高度：45px；
最小宽度：200px；
边缘底部：10px；
边框：2个实心#53DD6C；
边界半径：8px；
背景色：#ffffff；
盒影：4px40x20px0RGBA（35,31,32,05）；
过渡：不透明度200ms；
变换：变换200ms立方贝塞尔（.175、.885、.32、1.275），不透明度200ms；
字体系列：Poppins；
颜色：#53DD6C；
字体大小：14px；
线高：40px；
字号：700；
文本对齐：居中；
字母间距：0.5px；
文本转换：大写；
光标：指针；
大纲：无；
}
.纽扣蓝色{
高度：45px；
最小宽度：200px；
边缘底部：10px；
边框：2px实心#0491F2；
边界半径：8px；
背景色：#ffffff；
盒影：4px40x20px0RGBA（35,31,32,05）；
过渡：不透明度200ms；
变换：变换200ms立方贝塞尔（.175、.885、.32、1.275），不透明度200ms；
字体系列：Poppins；
颜色：#0491F2；
字体大小：14px；
线高：40px；
字号：700；
文本对齐：居中；
字母间距：0.5px；
文本转换：大写；
光标：指针；
大纲：无；
}
.主动{
背景色：黑色；
}

自由的
支付

我已经传递了完整的元素，因此您不必使用ID/Class

函数变更类型（元素）{
元素.classList.toggle（“活动”）；
}

.buttonCloserGreen{
高度：45px；
最小宽度：200px；
边缘底部：10px；
边框：2个实心#53DD6C；
边界半径：8px；
背景色：#ffffff；
盒影：4px40x20px0RGBA（35,31,32,05）；
过渡：不透明度200ms；
变换：变换200ms立方贝塞尔（.175、.885、.32、1.275），不透明度200ms；
字体系列：Poppins；
颜色：#53DD6C；
字体大小：14px；
线高：40px；
字号：700；
文本对齐：居中；
字母间距：0.5px；
文本转换：大写；
光标：指针；
大纲：无；
}
.纽扣蓝色{
高度：45px；
最小宽度：200px；
边缘底部：10px；
边框：2px实心#0491F2；
边界半径：8px；
背景色：#ffffff；
盒影：4px40x20px0RGBA（35,31,32,05）；
过渡：不透明度200ms；
变换：变换200ms立方贝塞尔（.175、.885、.32、1.275），不透明度200ms；
字体系列：Poppins；
颜色：#0491F2；
字体大小：14px；
线高：40px；
字号：700；
文本对齐：居中；
字母间距：0.5px；
文本转换：大写；
光标：指针；
大纲：无；
}
.主动{
背景色：黑色；
}

自由的
支付

dont user id=“myDIV”表示2个按钮用户的另一个id。例如id=“myDIV2”，那么我应该如何在Javascript和HTML中更改它。请您提供帮助。Geo给出的答案是更聪明的解决方案。对于2按钮用户，请不要使用用户名=“myDIV”另一个用户名。例如，id=“myDIV2”，那么我应该如何在Javascript和HTML中更改该用户名。你能帮忙吗？Geo给出的答案是更聪明的解决方案。很好。从“免费”和“付费”两个标题中假设OP希望在这两个标题之间切换，而不是同时选择这两个标题。在目标元素上切换“active”之前，也许可以从两个按钮中删除类“active”？很好。从“免费”和“付费”两个标题中假设OP希望在这两个标题之间切换，而不是同时选择这两个标题。在目标元素上切换“active”之前，也许可以从两个按钮中删除类“active”？