javascript: remove/add class function

Question

Я нашел очень простую функцию javascript для слайд-шоу (here). Он отлично работает, но я хочу что-то изменить о кнопках управления. Прямо сейчас, кнопка воспроизведения/паузы отображается это собственное имя, например:

<button class="controls" id="pause">Pause</button> 

Javascript установлен для запуска функции под названием pauseSlideshow при определенных обстоятельствах, которые не только приостанавливает/возобновляет слайд-шоу, но и изменяет отображаемое содержание кнопки с «пауза», чтобы «играть»:

var playing = true; 
var pauseButton = document.getElementById('pause'); 

function pauseSlideshow() { 
    pauseButton.innerHTML = 'Play'; 
    playing = false; 
    clearInterval(slideInterval); 
} 

теперь, что я хочу сделать, это оставить кнопку пустым и работать ширина фоновых изображений, и делать, что я планировал сделать простой класс swap всякий раз, когда срабатывает функция pauseSlideshow. Таким образом, первый я добавил класс с именем pause к кнопке с нужным фоновым изображением набор в стиле:

<button class="controls pause" id="pause"></button> 

и рядом я собирался сделать что-то вроде этого:

var playing = true; 
var pauseButton = document.getElementById('pause'); 

function pauseSlideshow() { 
    pauseButton.removeClass('pause'); 
    pauseButton.addClass('play'); 
    playing = false; 
    clearInterval(slideInterval); 
} 

(где play это другой класс с другим фоновым изображением). Достаточно сказать, как только pauseSlideshow запускается, функция сработает. Я пишу что-то неправильно или не в том месте, но я знаю, что этот подход жизнеспособен.

, пожалуйста, может кто-нибудь указать на ошибку?

EDIT:

Use $(pauseButton).removeClass('pause'); and $(pauseButton).addClass('play');. addClass and removeCalss are jQuery methods. And you need to add jQuery reference too. – user3698428

document.getElementById("pause") does not return a jQuery element. .removeClass() and .addClass() are jQuery functions. So basically you are trying to call jQuery functions on a non-jQuery element and it's throwing an error. Change it to var pauseButton = $("#pause"); or $(pauseButton).removeClass(...); $(pauseButton).addClass(...);

при попытке так или иначе, консоль возвращается: Uncaught ReferenceError: $ не определен

Answer 1

При работе в чистом JavaScript, вы должны использовать это, чтобы добавить или удалить класс:

pauseButton.classList.remove('pause'); 
pauseButton.classList.add('play'); 

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList