Невозможно изменить класс элемента с помощью JS

Question

Я пытаюсь изменить класс элемента span внутри кнопки, используя JS, консоль показывает изменение класса, но на самом деле класс не меняется.

Element html:

   sometext  sometext1   

JS:

const firstButton = document.getElementById('first-button-id')
const secondButton = document.getElementById('second-button-id')
if (e.type === 'mouseenter') {
  if (this.status === 'x' || this.status === 'y') {
    firstButton.classList.toggle('hide')
    secondButton.textContent = 'sometext'
    secondButton.classList.toggle('hide')
    console.log(firstButton.classList, secondButton.classList)
  } else if (e.type === 'mouseleave') {
    firstButton.classList.toggle('hide')
    secondButton.classList.toggle('hide')
    console.log(firstButton.classList, secondButton.classList)
  }
}

Тоже пробовал менять через консоль в браузере - наткнулся на та же проблема.

Если это важно, кнопка является частью Vue компонента

Answer 1

Вместо использования описанного выше метода вы можете попробовать получить идентификатор элемента и соответствующим образом изменить весь класс:

var element = document.getElementByID("element");
element.className = the_classname_you_desire;

ИЛИ

Вы можете попробовать получить идентификатор элемент и соответственно добавив тип класса:

var element = document.getElementByID("element");
element.className += the_classname_you_desire;

Надеюсь, этот альтернативный метод сработает для вашего желания кодирования.