Massage d"erreur : addEventListener

Par AngM, il y a 4 ans

Javascript

Bonjour à tous,

Je dois créer un formulaire en javascript mais je suis bloquée par ce message d'erreur :
Cannot read properties of null (reading 'addEventListener').

Je pense que mon problème viens du fait que je n'ai pas déclaré le bouton mais je n'en suis pas certaine...
J'ai essayée de le créer mais rien n'y fait...

Voici un extrait de mon JS

function form() { /* Avec RegExp */ let lettersRegExp = new RegExp("^[a-zA-Z ,.'-]+$"); let addressRegExp = new RegExp("[^A-Za-z0-9]"); let emailRegExp = new RegExp("^[a-zA-Z0-9.-_]+[@]{1}[a-zA-Z0-9.-_]+[.]{1}[a-z]{2,10}$"); /* Prénom */ const inputFirstName = document.getElementById("firstName"); const errorFirstName = document.getElementById("firstNameErrorMsg"); const displayFirstName = function (surname) { let isValid = false; let testSurname = lettersRegExp.test(surname); if (testSurname) { errorFirstName.innerText = ""; isValid = true; } else { errorFirstName.innerText = "Veuillez renseigner votre prénom"; isValid = false; } return(isValid) }; inputFirstName.addEventListener("input", function (event) { displayFirstName(event.target.value); console.log(displayFirstName(event.target.value)); });

Et le code HTML correspondant :

<form method="get" class="cart__order__form"> <div class="cart__order__form__question"> <label for="firstName">Prénom: </label> <input type="text" name="firstName" id="firstName" required> <p id="firstNameErrorMsg"><!-- ci est un message d'erreur --></p> </div> <div class="cart__order__form__question"> <label for="lastName">Nom: </label> <input type="text" name="lastName" id="lastName" required> <p id="lastNameErrorMsg"></p> </div> <div class="cart__order__form__question"> <label for="address">Adresse: </label> <input type="text" name="address" id="address" required> <p id="addressErrorMsg"></p> </div> <div class="cart__order__form__question"> <label for="city">Ville: </label> <input type="text" name="city" id="city" required> <p id="cityErrorMsg"></p> </div> <div class="cart__order__form__question"> <label for="email">Email: </label> <input type="email" name="email" id="email" required> <p id="emailErrorMsg"></p> </div> <div class="cart__order__form__submit"> <input type="submit" value="Commander !" id="order"> </div> </form>

Merci pour votre aide ! :)

3 réponses

Soundboy39, il y a 4 ans

Hello,

Ce qui me choque, c'est le type d'évenement "input".

Sauf erreur, apparement le but est de faire une vérification dynamique et immédiate du contenu des champs, dans ce cas, il vaudrait mieux passer par un "keyup" ou "change".

Orivoir21, il y a 4 ans

Bonjour, l'erreur indique que tu as essayé d'appelé la méthode addEventListener sur la valeur null

Javascript essai de te dire que cette ligne là:

inputFirstName.addEventListener

lui il l'interprète de cette façon:

null.addEventListener

c'est ce qui provoque l'erreur

la donnée inputFirstName qui et accusé de contenir la valeur null à la place d'un élément du document et définit en haut du fichier via la ligne:

const inputFirstName = document.getElementById("firstName");

La séléction indiqué fait référence à un élément dans le document qui aurait un attribut id avec la valeur firstName

dans la structure HTML que tu nous montres on le voit cet élément il et définit par la ligne:

<input type="text" name="firstName" id="firstName" required>

donc normalement la variable inputFirstName ne devrait pas être null elle devrait contenir un HTMLInputElement

Un cas où la séléction à planté peut-être dut au fait que le Javascript c'est chargé avant le document (donc quand tu fait ta séléction le document n'est pas encore disponible).
Cela peut arrivé si le Javascript et chargé au niveau de la balise head dans un document du genre:

<!DOCTYPE> <html> <head> <meta charset="utf-8"> <script> // ici le javascript et chargé avant le document // les séléction du genre: const inputFirstName = document.getElementById("firstName"); // sont susceptible de renvoi null </script> </head> </body> <!-- ... --> </body> </html>

Pour éviter que le Javascript s'exécute trop tôt tu peut posé un événement global (sur le document) qui sert à écouter le chargement du document

// écoute le chargement du document document.addEventListener('DOMContentLoaded', function() { // ici le document et chargé, on peut effectué les selection sur le document const inputFirstName = document.getElementById("firstName"); // ... });

@Soundboy39 l'événement input sur un HTMLInputElement permet d'écouté tous les changements de valeur dans la zone de texte il parait très adapté (c'est clairement celui que j'aurais recommandé) pour effectuer des traitement "live" où "dynamique" sur une zone de texte.

Soundboy39, il y a 4 ans

@Orivoir21 OK merci pour ma gouverne.