Javascript: кнопка не работает должным образом для кнопки

Question

Я новичок в Vue и Javascript.У меня есть две кнопки, которые должны менять цвет фона при нажатии.Я добавил немного кода Javascript, чтобы заставить их переключаться, но проблема в том, что при выборе кнопки «Бесплатно» фон меняется, но при выборе кнопки «Платно» он не меняется.

Если кто-то может помочь, это будетБуду очень признателен.

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

Ниже приведен кодекс за то, что я пытаюсь сделать.

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

Большое спасибо !!!

Answer 1

Вы можете сделать, как показано ниже:

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

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

В jquery:

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

Answer 2

Я прошел полный элемент, поэтому вам не нужно использовать идентификатор / класс.

function changeType(element) {
  element.classList.toggle("active");
}

.buttonCloserGreen{
    height: 45px;
    min-width: 200px;
    margin-bottom: 10px;
    border: 2px solid #53DD6C;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 4px 4px 20px 0 rgba(35, 31, 32, .05);
    transition: opacity 200ms ease;
    transition: transform 200ms cubic-bezier(.175, .885, .32, 1.275), opacity 200ms ease;
    font-family: Poppins;
    color: #53DD6C;
    font-size: 14px;
    line-height: 40px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
}

.buttonCloserBlue{
    height: 45px;
    min-width: 200px;
    margin-bottom: 10px;
    border: 2px solid #0491F2;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 4px 4px 20px 0 rgba(35, 31, 32, .05);
    transition: opacity 200ms ease;
    transition: transform 200ms cubic-bezier(.175, .885, .32, 1.275), opacity 200ms ease;
    font-family: Poppins;
    color: #0491F2;
    font-size: 14px;
    line-height: 40px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
}

.active{
  background-color: black;
}

<button class="buttonCloserGreen" onclick="changeType(this)" id="myDIV">
Free
</button>

<button class="buttonCloserBlue" onclick="changeType(this)" id="myDIV">
Paid
</button>

Answer 3

Edit: изменена функция 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");
 }

Демо