Uncaught TypeError: Cannot read property 'querySelectorAll' of null

**avion** · 18/07/2018, 17h37

Salut à tous,

Je vous expose mon problème après maintes fois vu et revu ! Mon JS marche en local, et quand je l'envoie en prod , il ne fonctionne plus et me donne l'erreur suivante :

Uncaught TypeError: Cannot read property 'querySelectorAll' of null

Mon code JS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
app = {
 
    /**  Fonction appelée au chargement du DOM **/
    init: function () {
        console.info("app.init")
 
        /** Ecoute le bouton submit **/
        var  buttonAction = document.getElementById("buttonInput")
        if (buttonAction){
            buttonAction.addEventListener("click", this.submitform)
        }
 
    },
 
    submitform: function (e) {
        console.info("app.submitform")
 
        e.preventDefault()
        app.Onsubmit()
 
    },
 
    Onsubmit: function () {
        console.info("app.Onsubmit")
 
        var submitAction = document.getElementById("buttonInput")
        if (submitAction){
            var  name = document.querySelector(".inputName")
            var  email = document.querySelector(".inputMail")
            var  message = document.querySelector("textarea")
 
            // POUR LE CSS SPAN : ERREURS
            var spanName = document.querySelector('.errorName')
            spanName.style.position = 'absolute';
            spanName.style.left = '18em';
            spanName.style.top = '22.5em';
            spanName.style.width = '45%';
 
            var spanMail = document.querySelector('.errorMail')
            spanMail.style.position = 'absolute';
            spanMail.style.left = '18em';
            spanMail.style.top = '26.5em';
            spanMail.style.width = '47%';
 
            var spanMessage = document.querySelector('.errorMessage')
            spanMessage.style.position = 'absolute';
            spanMessage.style.left = '18em';
            spanMessage.style.top = '30.1em';
            spanMessage.style.width = '53%';
 
 
            var errors = []
            if (name.validity.valueMissing){
                errors["name"] = document.querySelector(".errorName").textContent = "Le champs nom obligatoire."
                return false
            }else {
                var nomRegExp = /^[a-z]+$/i
                if (name.value !== nomRegExp && name.value.length < 3){
                    errors["name"] = document.querySelector(".errorName").textContent = "Le nom n'est pas valide."
                    return false
                }else {
                    errors["name"] = document.querySelector(".errorName").textContent = " "
                }
 
            }
 
            if (email.validity.valueMissing){
                errors["email"] = document.querySelector(".errorMail").textContent = "Le champs email obligatoire."
                return false
            }else {
                var emailRegExp = /^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/
                if (!emailRegExp.test(email.value)){
                    errors["email"] = document.querySelector(".errorMail").textContent = "L'email n'est pas valide."
                    return false
                } else {
                    errors["email"] = document.querySelector(".errorMail").textContent = ""
                }
            }
 
            if (message.validity.valueMissing){
                errors["message"] = document.querySelector(".errorMessage").textContent = "Le champs message obligatoire."
                return false
            }else {
                if (message.value.length < 100){
                    errors["message"] = document.querySelector(".errorMessage").textContent = "Votre message est court."
                    return false
                } else {
                    errors["message"] = document.querySelector(".errorMessage").textContent = ""
                }
            }
 
 
            /**** APPEL AJAX : si, pas d'erreurs ****/
            if (!(errors['name'] && errors['email'] && errors['message'])){
                app.callRequestAction()
            }
 
        }
 
    },
 
    callRequestAction: function () {
        console.info('app.callRequestAction')
 
        var xhr = false
        var form = document.querySelector("#form")
        var button = document.querySelector("#buttonInput")
 
        xhr = new XMLHttpRequest()
        if (!xhr){
            return false
        }
 
        xhr.onreadystatechange = function () {
            button.disabled = true
            button.textContent = "Chargement..."
 
            if (xhr.readyState === 4){
               app.callAjaxAction(xhr)
            }
        }
        xhr.open('POST', 'contact', true)
        xhr.setRequestHeader('X-Requested-With','XMLHttpRequest')
        var  data = new  FormData(form)
        xhr.send(data)
    },
 
    callAjaxAction: function (xhr) {
        console.info('app.callAjaxAction')
 
        var form = document.querySelector("#form")
        var button = document.querySelector("#buttonInput")
 
        if (xhr.readyState === XMLHttpRequest.DONE){
 
            if (xhr.status === 200){
 
                var inputs = form.querySelectorAll("input,textarea")
                for(var i = 0; i < inputs.length; i++){
                    inputs[i].value = ''
                    button.disabled = false
                    button.textContent = 'Envoyer'
                }
 
                var divContainer = document.querySelector('.formContact')
                var div = document.createElement('div')
                div.className = 'flash-notice'
                divContainer.appendChild(div)
 
                // AJOUT DE STYLE
                div.style.position = 'relative';
                div.style.top = '-24em';
 
                div.textContent = 'Votre message a été envoyé !'
            }else {
                return false
            }
        }
    }
 
 
 
}
 
/** Chargement du DOM**/
window.onload = app.init()

Merci de vos retours !

http://dev-muss.fr

**Beginner.** · 18/07/2018, 18h15

Salut,

Cela se produit quand ?

PS : Sur le site un des script n'est pas trouvé : <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

**avion** · 18/07/2018, 19h20

Cela se produit quand j'envoie le formulaire .

**NoSmoking** · 18/07/2018, 19h25

Bonjour,
si l'on s'attarde sur ces lignes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
        var form = document.querySelector("#form")
        var button = document.querySelector("#buttonInput")
        if (xhr.readyState === XMLHttpRequest.DONE){
            if (xhr.status === 200){
                var inputs = form.querySelectorAll("input,textarea")

cela signifie simplement que document.querySelector("#form") retourne undefined, as tu un élément ayant id="form" dans ta page ?

@Beginner. : adsbygoogle.js c'est un code d'annonce G_o^oogle, en gros le super truc bien inutile pour commencer

**avion** · 18/07/2018, 19h38

Oui,

Mon contact.html.twig

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{{ form_start(form, {'attr': {'novalidate': 'novalidate', 'id' : 'form'}}) }}
 
                <div class="nom">
                    <label for="{{ form.name.vars.id }}"></label>
                    <input type="text" name="{{ form.name.vars.full_name }}"
                           value="{{ form.name.vars.value }}" class="inputName"
                           id="{{ form.name.vars.id }}" placeholder="Votre nom" required>
                    {#<span class="errorNamejs" aria-live="polite">{{ form_errors(form.name) }}</span>#}
                    <span class="errorName" aria-live="polite">{{ form_errors(form.name) }}</span>
                    {% do form.name.setRendered %}
                </div>
 
                <div class="email">
                    <label for="{{ form.email.vars.id }}"></label>
                    <input type="email" name="{{ form.email.vars.full_name }}"
                           value="{{ form.email.vars.value }}" class="inputMail"
                           id="{{ form.email.vars.id }}" placeholder="Votre email" required>
                    {#<span class="errorMailjs" aria-live="polite">{{ form_errors(form.email) }}</span>#}
                    <span class="errorMail" aria-live="polite">{{ form_errors(form.email) }}</span>
                    {% do form.email.setRendered %}
                </div>
 
                <div class="message">
                    <label for="{{ form.message.vars.id }}"></label>
                    <textarea name="{{ form.message.vars.full_name }}" id="{{ form.message.vars.id }}"
                              value="{{ form.message.vars.value }}"
                              placeholder="Votre message ..." cols="30" rows="10" required></textarea>
                    {#<span class="errorMessagejs" aria-live="polite">{{ form_errors(form.email) }}</span>#}
                    <span class="errorMessage" aria-live="polite">{{ form_errors(form.message) }}</span>
                    {% do form.message.setRendered %}
                </div>
 
                <button type="submit" id="buttonInput">Envoyer</button>
            {{ form_end(form) }}

Est-ce possible de savoir pourquoi, en local le code fonctionne parfaitement et en production (je suis chez OVH) , j'ai cette erreur ?

**Beginner.** · 18/07/2018, 19h40

Merci NoSmoking pour l'info...

Envoyé par avion

Cela se produit quand j'envoie le formulaire .

Ben si tu parles de ce formulaire http://dev-muss.fr/contact eh bien j'ai testé et rien ne se passe chez moi...

**avion** · 18/07/2018, 19h42

Envoyé par Beginner.

Merci NoSmoking pour l'info...

Ben si tu parles de ce formulaire http://dev-muss.fr/contact eh bien j'ai testé et rien ne se passe chez moi...

Qu'est ce que je dois comprendre par, rien ne se passe chez moi ? Que tout fonctionne parfaitement ?

**NoSmoking** · 18/07/2018, 19h42

Mon contact.html.twig

C'est le code HTML généré qu'il faut regarder et nous mettre éventuellement

**Beginner.** · 18/07/2018, 19h54

Envoyé par avion

Qu'est ce que je dois comprendre par, rien ne se passe chez moi ? Que tout fonctionne parfaitement ?

Non, je veux dire que rien ne semble être exécuté coté js or je suppose que normalement la fonction callAjaxAction est censée être exécutée, non ?

Ceci dit dans cette fonction je vois cette ligne : var form = document.querySelector("#form") mais je n'ai pas vu de formulaire ayant "form" comme id (identifiant) donc même si la fonction était exécutée il y aurait là un problème, la variable "form" serait égale à null et donc normal que tu ais ce message d'erreur car quelques lignes après tu as var inputs = form.querySelectorAll("input,textarea") avec "form" qui vaut null...

En fait ça rejoint ce qu'a dit NoSmoking...

**Beginner.** · 18/07/2018, 20h23

Ça y est j'ai pu tester et cela confirme ce que je disais : on a bien la variable "form" qui vaut null (après exécution de var form = document.querySelector("#form")) et donc c'est normal que tu aies ce message d'erreur après exécution de var inputs = form.querySelectorAll("input,textarea")...

Et c'est normal qu'elle vaut null puisque dans le html tu as <form name="appbundle_user" method="post" novalidate="novalidate"> c'est-à-dire que la balise <form> n'a pas d'identifiant égal à "form" c'est-à-dire on n'a pas : id="form".

**avion** · 18/07/2018, 21h31

Capture d'écran , contact.html.twig (en local):
Nom : local.PNG
Affichages : 3395
Taille : 21,2 Ko

Capture d'écran, contact.html.twig (En prod):
Nom : prod.PNG
Affichages : 3363
Taille : 15,5 Ko

Vous avez bien raison, l'ID : "form" n'existe pas en prod mais je ne sais pas pourquoi !? Alors que sur mon server (ovh), il y est ! Je ne comprends pas . Une idée ?

**avion** · 18/07/2018, 23h16

J'ai pu réglé l'erreur (Uncaught TypeError: Cannot read property 'querySelectorAll' of null) en supprimant tous mes fichiers sur mon server (ovh ne chargeait pas mes fichiers correctement) et, juste les réinstaller et ça marche !

Merci encore

Uncaught TypeError: Cannot read property 'querySelectorAll' of null

JavaScript

Discussions similaires

Partager

Partager