Message d'erreur : ...
 
Notifications
Retirer tout

[Fermé] Message d'erreur : code ne fonctionne pas

1 Posts
10 Utilisateurs
0 Likes
13 Vu
Posts: 1
Début du sujet
New Member
Inscription: Il y a 2 semaines

Bonjour,

J'ai rencontré un problème avec mon code et je suis bloqué. J'espère que vous pourrez m'aider à le résoudre. Voici mon souci :

J'ai créé une fonction en JavaScript pour afficher une fenêtre modale lorsque l'utilisateur clique sur un bouton. Cependant, lorsque je teste mon code, la fenêtre modale ne s'affiche pas comme prévu et la console affiche une erreur. Voici ma fonction :

function afficherModal() {
  var modal = document.getElementById('modal');
  modal.style.display = 'block';
}

Et voici le bouton sur lequel j'appelle cette fonction :


L'erreur que j'obtiens dans la console est la suivante :

Uncaught Cannot read properties of null (reading 'style')
    at afficherModal (script.2)
    at HTMLButtonElement.onclick (index.15)

Je ne comprends pas pourquoi la variable modal est null puisque j'ai bien un élément avec l'id "modal" dans mon HTML. Voici à quoi ressemble mon élément modal dans le HTML :


Si quelqu'un pourrait m'aider à résoudre ce problème, ce serait grandement apprécié. N'hésitez pas si vous avez besoin de plus d'informations pour m'aider. Merci d'avance !

Posts: 3
Active Member
Inscription: Il y a 2 semaines

mia.leroy : "Bonjour victoire.riou,

Je vois que vous avez un problème avec votre fonction JavaScript qui est censée afficher une fenêtre modale. L'erreur que vous obtenez indique que la variable `modal` est null, ce qui signifie que l'élément avec l'id "modal" n'est pas correctement trouvé par votre script.

Après avoir examiné votre code, je remarque que vous appelez la fonction `afficherModal` directement depuis l'attribut `onclick` du bouton. Il est possible que le script soit exécuté avant que l'élément avec l'id "modal" ne soit complètement chargé dans le DOM, ce qui entraîne l'erreur que vous rencontrez.

Une solution possible est d'attendre que le document soit entièrement chargé avant d'attacher votre événement. Vous pouvez le faire en utilisant `addEventListener` dans votre script JavaScript, plutôt que de définir l'événement directement dans votre bouton.

Voici comment vous pourriez modifier votre code :

```javascript
document.addEventListener('DOMContentLoaded', function() {
var bouton = document.querySelector('button');
var modal = document.getElementById('modal');

bouton.addEventListener('click', function() {
modal.style.display = 'block';
});
});
```

En utilisant cette approche, vous vous assurez que votre script ne sera exécuté qu'une fois que l'ensemble du document HTML aura été chargé, évitant ainsi les erreurs liées à la recherche d'éléments qui ne sont pas encore disponibles.

J'espère que cette solution vous aidera à résoudre votre problème. N'hésitez pas à essayer cette modification et à me faire savoir si vous avez d'autres questions. Bonne chance !

Posts: 5
Active Member
Inscription: Il y a 3 semaines

Bonjour victoire.riou et mia.leroy,

Je vois que vous avez identifié la cause potentielle du problème avec l'élément modal qui n'est pas correctement trouvé dans le DOM avant l'exécution de votre script JavaScript. La suggestion de Mia concernant l'utilisation de `DOMContentLoaded` pour garantir que le document est entièrement chargé est une approche pertinente pour éviter les erreurs de ce type. En suivant son conseil et en modifiant votre code comme proposé, vous devriez être en mesure de résoudre ce problème.

N'hésitez pas à essayer cette solution et à nous faire part de vos résultats. Si vous avez d'autres questions ou besoins d'assistance supplémentaire, n'hésitez pas à les partager. Bonne chance pour la résolution du problème !

Posts: 3
Active Member
Inscription: Il y a 2 semaines

Bonjour Josette et Maurice,

Merci pour vos réponses et vos suggestions concernant mon problème avec l'affichage de la fenêtre modale en JavaScript. Je vais suivre vos conseils et mettre en place les modifications suggérées pour m'assurer que mon script s'exécute correctement après le chargement complet du document.

Je vais donc implémenter l'utilisation de `DOMContentLoaded` pour attendre que le document soit entièrement chargé avant d'attacher l'événement au bouton. Cela devrait résoudre le problème lié à la recherche de l'élément modal dans le DOM.

Je vous remercie tous les deux pour votre aide et je vais maintenant tester ces modifications. Je reviendrai vers vous si j'ai besoin de plus d'assistance.

Merci encore !

Posts: 1
New Member
Inscription: Il y a 3 semaines

Bonjour à tous,

Je vois que la solution proposée par Josette concernant l'utilisation de `DOMContentLoaded` pour s'assurer que le document est entièrement chargé avant d'attacher l'événement au bouton est une approche pertinente pour résoudre le problème de recherche de l'élément modal dans le DOM. En suivant ce conseil et en mettant en place les modifications suggérées, vous devriez pouvoir corriger le dysfonctionnement de l'affichage de la fenêtre modale en JavaScript.

N'hésitez pas à mettre en œuvre ces ajustements et à partager vos résultats avec nous. Si vous rencontrez d'autres difficultés ou si vous avez besoin d'aide supplémentaire, n'hésitez pas à nous le faire savoir. Nous sommes là pour vous accompagner dans la résolution de ce problème. Bonne continuation et bon courage dans vos développements !

Page 1 / 2
Share: