Как по клику на элемент проверить содержимое input и изменить ему class?

Question

[Ningaro]

Я пытался сделать так что бы при нажатие на кнопку проверялся ответ в input и если он верный то класс менялся на .is-valid, в противном случаи .is-invalid

<input type="text" class="form-control" id="zd_7" placeholder="Введите ответ">
 <button type="button" id="check-btn" class="btn btn-lg btn-outline-success">Проверить ответы.</button>

document.getElementById('check-btn').onclick = function() {
    if (document.getElementById('zd_7').value ==  5 ) {
      document.getElementById('zd_7').removeClass("is-invalid");
      document.getElementById('zd_7').addClass("is-valid");
    } else {
      document.getElementById('zd_7').removeClass("is-valid");
      document.getElementById('zd_7').addClass("is-invalid");

Но вы итоге я получаю ошибку в консоле

Uncaught TypeError: document.getElementById(...).removeClass is not a function
    at HTMLButtonElement.document.getElementById.onclick

UPDATE
Обратился как посоветовали в ответах к конкретному элементу и все заработало!

document.getElementById('check-btn').onclick = function() {
    if ($('#zd_7').value ==  5 ) {
      $('#zd_7').removeClass("is-invalid");
      $('#zd_7').addClass("is-valid");
    } else {
      $('#zd_7').removeClass("is-valid");
      $('#zd_7').addClass("is-invalid");

Answer 1

[Andrew]

Хмм.
Вам синтаксис чего нужен? JS или jQuery?
JS: element.classList.remove("className");
jQuery:
$(el).removeClass('className');

Answer 2

[Enrage]

Скорее всего не подключена библиотека jQuery.
Попробуйте так:

document.getElementById('zd_7').classList.remove("is-invalid");
document.getElementById('zd_7').classList.add("is-valid");

Answer 3

[Sanovskiy]

.removeClass это метод из jQuery
В нативном js нет методов манипуляции классами. Есть только свойство DomNode.className
Вам придется распарсить значение и вручную изменить строку.

Либо использовать jQuery

Comments

[Анатолий Медведев]

С разморозкой!

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

[Sanovskiy]

Анатолий Медведев,
The Element.classList is a read-only property which returns a live DOMTokenList collection of the class attributes of the element.
Какая из букв в словах read only вам непонятна?

[Анатолий Медведев]

Sanovskiy, естественно это ридонли объект к которого есть методы для манипуляций. Вы из какого года? У нас тут ООП во все поля

[Sanovskiy]

Анатолий Медведев, теперь разглядел. Спасибо за информацию. Как прожженный бэкендщик, последнее время весьма мало уделяю времени фронтенду. Вот и попадаю в такие вот ситуации. :)