Débutant - Uncaught TypeError: Cannot read property 'style' of null

mattzeub
Javascript

Bonjour,

Je pratique PHP et j'ai récemment commencé l'apprentissage de javascript.
J'ai d'entrée un petit problème (j'ai déjà cherché par mes propres moyens et fait plusieurs tests mais je ne trouve pas de solution).

Avec cette ligne de code:
document.querySelector('.notifications').style.display = 'null'

Lorsque je la rentre directement dans ma console, il n'y a aucun problème et l'élément se met bien en display null.

Cependant dès que je met exactement cette même ligne de code dans mon html. (j'ai plus précisément un fichier js relié à mon html mais ça ne change rien) cette erreur apparaît :

index.js:1 Uncaught TypeError: Cannot read property 'style' of null

Comme si ma class css n’existait pas, pourtant ça marche bien depuis ma console et après vérification elle existe bien. Du coup je comprend pas je trouve pas ça très logique (même si la raison doit l'être)

cordialement,
mattéo

7 réponses

acanoenfr

Essaie avec la valeur "none" comme ceci :

document.querySelector('.notifications').style.display = 'none'
mattzeub
Auteur

bienvu c'était déjà une erreur de mettre null à la place de none, merci -
Cependant l'erreur subsiste donc aucune idée

Pierrot01

salut,

Met ça dans l'évenement onload ;)

@plus

Pierre

mattzeub
Auteur

salut,
merci de m'aider, cependant mon fichier js est relié dans le head, il est donc déjà load.
Mais j'ai quant même essayé:

window.onload = document.querySelector('.notifications').style.display = 'none'
(et comme dhab, ça fonctionne sans pb dans la console, mais dès que je le met dans mon fichier js ça bug)

petite précision: le problème ne vient pas de style.
C'est en effet mon document.querySelector('.notifications') qui renvoit undefinded.
Alors que dans la console ça me renvoi bien mon élément.

J'ai essayé de remplacer mon queryselector par un getElementsByClassName('notifications')[0]
pareil ça marche dans la console mais pas dans le fichier.

cordialement,
mattéo

Lartak

merci de m'aider, cependant mon fichier js est relié dans le head, il est donc déjà load.

Le problème, c'est comme le fichier est déja chargé, il exécute le code avant même que le contenu de la balise body soit affiché, par conséquent l'élément ayant la classe notifications n'existe pas encore dans le code et est donc undefined.

(et comme dhab, ça fonctionne sans pb dans la console, mais dès que je le met dans mon fichier js ça bug)

C'est tout à fait normal vu que l'orsque tu fais la commande dans la console, le DOM est totalement chargé, donc l'élément existe bien et n'est donc pas undefined.
De plus que tu ne dois pas faire window.onload = ..., mais je te recommande plutôt de faire :

document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelector('.notifications').style.display = 'none'
    // le reste de ton code qui du fichier JavaScript qui correspond au contenu de ta balise body
}
mattzeub
Auteur

ah bah oui c'est bien vu, c'était une erreur pourtant logique.
En tout cas merci bcp d'avoir pris ton temps pour répondre.
Bonne journée :)

toucha toucha

Essaie avec la valeur "none" ?
<a href="https://onlinesbi.tips/">Onlinesbi</a> <a href=" https://thegadgetwire.com/tutuapp/">TutuApp</a> <a href="https://aadharcard.vip/">aadharcard<a>