Uncaught TypeError: Cannot read property ‘classList’ of null

classList of null JavaScript

Hibaüzenet

Uncaught TypeError: Cannot read property 'classList' of null

Hibás kód

document.querySelector('.my-button').classList.add('active');

Javított kód

document.addEventListener('DOMContentLoaded', () => {
  const btn = document.querySelector('.my-button');
  if (btn) btn.classList.add('active');
});

Magyarázat

classList of null JavaScript hiba akkor fordul elő, amikor a DOM elemet próbáljuk manipulálni, de az még nincs betöltve vagy hibás a szelektor. Ilyenkor a querySelector null-t ad vissza, és a null.classList TypeError-t dob. A megoldás, hogy várunk a DOMContentLoaded eseményre, majd ellenőrizzük, hogy az elemet sikeresen lekértük-e (if (btn)) mielőtt hozzáadjuk a active osztályt.

További információ: MDN – Element.classList