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

Question

我对 Vue 和 Javascript 还算陌生。我有两个按钮，单击时应更改背景颜色。我添加了一些 Javascript 代码来使它们切换，但问题是，当选择“免费”按钮时，背景会发生变化，但当选择“付费”按钮时，背景不会改变。

如果有人可以提供帮助，我们将不胜感激。

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

下面是我正在尝试做的事情的 Codepen。

https://codepen.io/Aadil_Hafesji/pen/bxZWLg

非常感谢!!!

Answer 1

编辑:更改了函数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");
 }

Demo