Ipoote
Messages postés45Date d'inscriptiondimanche 23 septembre 2018StatutMembreDernière intervention21 mai 2023
-
Modifié le 13 mai 2022 à 12:50
DoctorHow -
13 mai 2022 à 20:49
Bonjour,
Je poste ce message car je sors d'un cours sur JS, et mon code me retourne des erreurs dont je ne comprends pas la raison.
Si quelqu'un a une solution ou une explication je suis preneur, car j'ai beau me creuser la tête sur le problème je ne trouve toujours pas la solution.
Je pense que le CSS n'est pas important sachant qu'il était uniquement stipulé de mettre la classe "invisible" dans la variable cardASupprimer, je le mets quand même dans le doute.
var croix = document.getElementsByClassName("pcard__suppression")
var cardASupprimer = document.getElementsByClassName("pcard")
var reapp = document.getElementsByClassName("regenerer bouton")
function cacher(){
const evenement_suppression = new CustomEvent("suppression_pcard");
cardASupprimer.dispatchEvent(evenement_suppression);
cardASupprimer.classList.add("invisible")
}
for (var i = 0 ; i < croix.length; i++) {
croix[i].addEventListener('click', cacher) ;
}
function reapparaitre(){
this.classList.remove("invisible")
document.getElementsByClassName('feedback__suppression').innerHTML = '';
}
for (var i = 0 ; i < reapp.length; i++) {
reapp[i].addEventListener('click', reapparaitre) ;
}
Salut, tout à fait d'accord parce que vous parlez d'erreur mais lesquelles?
Sans avoir à tester le code ça permettrait de savoir l'erreur retournée.
Vous parlez de requête mais je ne vois clairement aucune requête ou alors vous utilisez le mot à tort et à travers sans savoir ce qu'il signifie en programmation(ça serait le cas avec AJAX éventuellement qui mélange 2 ou 3 langages de programmation dont peut avoir à utiliser des requêtes, SQL est un langage de requête comme son nom l'indique).
On parle plutôt "d'instructions" si vous voulez indiquer une partie du programme en particulier(comme une ligne d'instructions) et avec JavaScript si on parle de requêtes c'est pour le DOM donc on reste dans JavaScript(requête signifiant ici d'accéder à un élément HTML = le DOM sa représentation virtuelle par JavaScript).
Bon ceci dit si vous lisez les erreurs et regardez les lignes vous comprendrez mieux, parfois ce n'est pas clair mais c'est une étape obligée pour apprendre.
Sans teste rle code je vois une erreur à la 3ème ligne:
var reapp = document.getElementsByClassName("regenerer bouton")
Regardez simplement les explications dans le manuel, vous comprendrez où est votre erreur et que c'est donc normal que le programme ne puisse fonctionner(une seule erreur et rien ne fonctionnera).
Le manuel indique clairement que ELEMENT.getElementsByClassName permet d'obtenir un tableau(une variable de plusieurs valeurs indexées à partir de 0) pour tous les éléments ayant le nom de classe en paramètre(entre les parenthèses).
Donc comme vous ne mettez pas un nom de classe mais "regenerer bouton" qui est soit le nom de 2 classes (séparées par un espace donc) soit une erreur de saisie(pour "regenererclasse" voire "regenerer_classe" ou autre chose) il est normal d'obtenir une erreur.
Un nom de classe ne pouvant contenir d'espace(qui sépare deux classes et permet donc d'avoir plusieurs classes pour un même élément comme ceci class="premiere-classe seconde-classe"
Par convention quand on soit utiliser un mot composé pour un nom de classe on peut l'indiquer par le symbole tiret "-", c'est une convention et ça rends juste l'ensemble plus simple à lire et comprendre mais pas une obligation. Écrire le nom de classe correctement l'est par contre, donc sans espace dans le nom d'une classe.
La console du navigateur est là pour vous aider, écouter ou plutôt lisez ce qui est dit (normalement indique ligne et colonne de l'erreur)ça vous aidera à corriger vos erreurs pour la peine que vous relisiez pour trouver l'erreur commise.
Et bien sûr attention aux fautes de frappe ou d’inattention.
edit: après relecture vous semblez faire appel à un fichier AJAX, donc parlez de requête AJAX ça sera plus clair si le problème vient de là(voir les états des données pour tester la requête et son résultat par exemple), ce qui ne semble pas votre seule erreur puisque déjà ligne 3 votre sélecteur par nom de classe est faux.
edit2: bien sûr vous ne faites pas appel à ce fichier... donc pas de requête dans votre code. Éventuellement puisque vous ne vous en servez pas vous le supprimez(son appel dans la page temporairement) pour vous concentrer déjà sur les erreurs que vous avez dans le code que vous montrez avant de passer à la correction du fichier: chargementAjax.js s'il contient des erreurs.
Une erreur à la fois à traiter c'est suffisant et en corriger une (dans l'ordre de haut en bas) ça réglera peut-être les problèmes qui suivent.
Ipoote
Messages postés45Date d'inscriptiondimanche 23 septembre 2018StatutMembreDernière intervention21 mai 2023
>
DoctorHow
13 mai 2022 à 15:29
Merci pour ta réponse rapide et super détaillée !
C'est bien d'instruction que je parle alors, autant pour moi, je pensais que le mot requête était aussi correct.
Je n'en suis pas encore au AJAX je n'ai donc pas encore rencontré de problème quant à ce dernier..
C'est vrai que j'aurais dû détailler davantage mon erreur, celle que j'obtiens avec le code donné est la suivante :
"pcard.js:24 Uncaught TypeError: cardASupprimer.dispatchEvent is not a function
at HTMLDivElement.cacher (pcard.js:24:20)"
Je me doute bien que cela vient d'une erreur de syntaxe ou de méthode (dans le sens où j'ai peut-être mal compris l'utilisation d'une fonction par ex.), mais je ne sais pas vraiment comment régler le problème. Un ami m'a envoyé son code qui fonctionne mais a utilisé un autre moyen de parvenir à ce qui était demandé dans l'exercice, mais je voudrais quand même comprendre pourquoi le mien est faux.
Concernant le "regenerer bouton", c'est ce qui était écrit dans le HTML que l'on nous a fourni avec l'exercice, c'est pour ça que je me suis contenté de recopier la classe telle qu'elle était dans le HTML, qu'est-ce que j'aurais dû faire dans ce cas ? Écrire "regenerer-bouton" ? Parce que le contenu qui suit cette classe est exactement celui que j'ai besoin de sélectionner.
En fait je n'en suis pas encore à la partie où l'on doit utiliser AJAX, c'est pour ça qu'on le voit dans certaines parties du code mais pas partout, je ne m'en suis pas encore occupé ^^
DoctorHow
>
Ipoote
Messages postés45Date d'inscriptiondimanche 23 septembre 2018StatutMembreDernière intervention21 mai 2023 Modifié le 13 mai 2022 à 20:41
ça me paraît clair ça:
cardASupprimer.dispatchEvent is not a function
J'avais vu l'erreur mais comme tu parlait de plusieurs j'attendais la suite.
cardASupprimer est un objet HTMLElement. A moins d'y ajouter la fonction dispatchEvent soi-même cette fonction n'existe simplement pas.
D'ailleurs même pour l'utiliser hors objet je ne la voit pas donc dur de faire appel à une fonction qui n'existe simplement pas... et plutôt normal d'avoir une erreur.
Il faut donc soit créer la fonction soit qu'elle existe déjà dans un des fichiers .js en liens à la fin de la page HTML.
Pour regenerer bouton soit l'exercice est mal fait voire faux soit vous avez mal lu la question mais un nom de classe ne peut s'écrire avec un espace en HTML.
indique que l'élément p à 2 classes CSS : une nommée "regenerer" l'autre nommée "bouton" et c'est ce que j'expliquais sur pouvoir en combiner plusieurs.
En JavaScript on ne peut sélectionner tous les éléments ayant la même classe(class attribut HTML) en utilisant :
ELEMENTPARENT.getElementsByClassName(NOMDELACLASSE)
Qu'il y ait 1 ou 100 éléments vous recevrez en réponse un tableau de variables.
Donc vos varaibles ne sont pas l'élément concerné directement.
L'objet document étant parent de toute la page écrire:
document.getElementsByClassName(nomdelaclasse)
sélectionne bien tout les éléments qui ont la classe voulue.
Un objet en informatique ou programmation orientée objet est un paradigme de conception.
Il consiste à regrouper des éléments(variables et fonctions) sur un thème ou une utilité précise.
Il a bien d'autres avantages mais on va se contenter de juste y accéder et laisser de côté l'aspect création et enrichissement(comme ajouter une fonction) qui ne me semble pas l'idéal sur un cours de débutant.
En JavaScript la notation pointée(avec un '.') indique que l'on accède à un objet, ou plutôt ses variables internes(nommés attributs) ou ses fonctions internes(nommées méthodes)
Donc quand vous voyez
ELEMENT.quelqueChose()
ou
ELEMENT.autreChose
Cela fait référence à ce que contient l'instance de l'objet, l'objet en cours pour simplifier.
En fait l'objet est une sorte de moule, son instance la création à partir du moule....bien sûr ce n'est qu'une image pour être plus précis tout est objet en JavaScript même les fonctions et inversement mais cela va pas vous éclairer beaucoup si vous ne savez pas utiliser correctement une fonction commencez par là:
Notez que le paramètre qui doit être utilisé doit être un objet "Event" donc vous ne pouvez pas l'utiliser directement mais devez passer par l'exemple.
Pour l'instant sans l'astuce AJAX (qui fait des requêtes asynchrones au serveur) il n'y a donc pas vraiment d'intérêt à l'utiliser.
A vous de voir si vous y tenez.
Modifié le 13 mai 2022 à 14:11
Sans avoir à tester le code ça permettrait de savoir l'erreur retournée.
Vous parlez de requête mais je ne vois clairement aucune requête ou alors vous utilisez le mot à tort et à travers sans savoir ce qu'il signifie en programmation(ça serait le cas avec AJAX éventuellement qui mélange 2 ou 3 langages de programmation dont peut avoir à utiliser des requêtes, SQL est un langage de requête comme son nom l'indique).
On parle plutôt "d'instructions" si vous voulez indiquer une partie du programme en particulier(comme une ligne d'instructions) et avec JavaScript si on parle de requêtes c'est pour le DOM donc on reste dans JavaScript(requête signifiant ici d'accéder à un élément HTML = le DOM sa représentation virtuelle par JavaScript).
Bon ceci dit si vous lisez les erreurs et regardez les lignes vous comprendrez mieux, parfois ce n'est pas clair mais c'est une étape obligée pour apprendre.
Sans teste rle code je vois une erreur à la 3ème ligne:
var reapp = document.getElementsByClassName("regenerer bouton")Regardez simplement les explications dans le manuel, vous comprendrez où est votre erreur et que c'est donc normal que le programme ne puisse fonctionner(une seule erreur et rien ne fonctionnera).
https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
Le manuel indique clairement que ELEMENT.getElementsByClassName permet d'obtenir un tableau(une variable de plusieurs valeurs indexées à partir de 0) pour tous les éléments ayant le nom de classe en paramètre(entre les parenthèses).
Donc comme vous ne mettez pas un nom de classe mais "regenerer bouton" qui est soit le nom de 2 classes (séparées par un espace donc) soit une erreur de saisie(pour "regenererclasse" voire "regenerer_classe" ou autre chose) il est normal d'obtenir une erreur.
Un nom de classe ne pouvant contenir d'espace(qui sépare deux classes et permet donc d'avoir plusieurs classes pour un même élément comme ceci class="premiere-classe seconde-classe"
Par convention quand on soit utiliser un mot composé pour un nom de classe on peut l'indiquer par le symbole tiret "-", c'est une convention et ça rends juste l'ensemble plus simple à lire et comprendre mais pas une obligation. Écrire le nom de classe correctement l'est par contre, donc sans espace dans le nom d'une classe.
La console du navigateur est là pour vous aider, écouter ou plutôt lisez ce qui est dit (normalement indique ligne et colonne de l'erreur)ça vous aidera à corriger vos erreurs pour la peine que vous relisiez pour trouver l'erreur commise.
Et bien sûr attention aux fautes de frappe ou d’inattention.
edit: après relecture vous semblez faire appel à un fichier AJAX, donc parlez de requête AJAX ça sera plus clair si le problème vient de là(voir les états des données pour tester la requête et son résultat par exemple), ce qui ne semble pas votre seule erreur puisque déjà ligne 3 votre sélecteur par nom de classe est faux.
edit2: bien sûr vous ne faites pas appel à ce fichier... donc pas de requête dans votre code. Éventuellement puisque vous ne vous en servez pas vous le supprimez(son appel dans la page temporairement) pour vous concentrer déjà sur les erreurs que vous avez dans le code que vous montrez avant de passer à la correction du fichier: chargementAjax.js s'il contient des erreurs.
Une erreur à la fois à traiter c'est suffisant et en corriger une (dans l'ordre de haut en bas) ça réglera peut-être les problèmes qui suivent.
13 mai 2022 à 15:29
C'est bien d'instruction que je parle alors, autant pour moi, je pensais que le mot requête était aussi correct.
Je n'en suis pas encore au AJAX je n'ai donc pas encore rencontré de problème quant à ce dernier..
C'est vrai que j'aurais dû détailler davantage mon erreur, celle que j'obtiens avec le code donné est la suivante :
"pcard.js:24 Uncaught TypeError: cardASupprimer.dispatchEvent is not a function
at HTMLDivElement.cacher (pcard.js:24:20)"
Je me doute bien que cela vient d'une erreur de syntaxe ou de méthode (dans le sens où j'ai peut-être mal compris l'utilisation d'une fonction par ex.), mais je ne sais pas vraiment comment régler le problème. Un ami m'a envoyé son code qui fonctionne mais a utilisé un autre moyen de parvenir à ce qui était demandé dans l'exercice, mais je voudrais quand même comprendre pourquoi le mien est faux.
Concernant le "regenerer bouton", c'est ce qui était écrit dans le HTML que l'on nous a fourni avec l'exercice, c'est pour ça que je me suis contenté de recopier la classe telle qu'elle était dans le HTML, qu'est-ce que j'aurais dû faire dans ce cas ? Écrire "regenerer-bouton" ? Parce que le contenu qui suit cette classe est exactement celui que j'ai besoin de sélectionner.
En fait je n'en suis pas encore à la partie où l'on doit utiliser AJAX, c'est pour ça qu'on le voit dans certaines parties du code mais pas partout, je ne m'en suis pas encore occupé ^^
Modifié le 13 mai 2022 à 20:41
cardASupprimer.dispatchEvent is not a function
J'avais vu l'erreur mais comme tu parlait de plusieurs j'attendais la suite.
cardASupprimer est un objet HTMLElement. A moins d'y ajouter la fonction dispatchEvent soi-même cette fonction n'existe simplement pas.
D'ailleurs même pour l'utiliser hors objet je ne la voit pas donc dur de faire appel à une fonction qui n'existe simplement pas... et plutôt normal d'avoir une erreur.
Il faut donc soit créer la fonction soit qu'elle existe déjà dans un des fichiers .js en liens à la fin de la page HTML.
Pour regenerer bouton soit l'exercice est mal fait voire faux soit vous avez mal lu la question mais un nom de classe ne peut s'écrire avec un espace en HTML.
indique que l'élément p à 2 classes CSS : une nommée "regenerer" l'autre nommée "bouton" et c'est ce que j'expliquais sur pouvoir en combiner plusieurs.
En JavaScript on ne peut sélectionner tous les éléments ayant la même classe(class attribut HTML) en utilisant :
ELEMENTPARENT.getElementsByClassName(NOMDELACLASSE)
Qu'il y ait 1 ou 100 éléments vous recevrez en réponse un tableau de variables.
Donc vos varaibles ne sont pas l'élément concerné directement.
L'objet document étant parent de toute la page écrire:
document.getElementsByClassName(nomdelaclasse)
sélectionne bien tout les éléments qui ont la classe voulue.
Un objet en informatique ou programmation orientée objet est un paradigme de conception.
Il consiste à regrouper des éléments(variables et fonctions) sur un thème ou une utilité précise.
Il a bien d'autres avantages mais on va se contenter de juste y accéder et laisser de côté l'aspect création et enrichissement(comme ajouter une fonction) qui ne me semble pas l'idéal sur un cours de débutant.
En JavaScript la notation pointée(avec un '.') indique que l'on accède à un objet, ou plutôt ses variables internes(nommés attributs) ou ses fonctions internes(nommées méthodes)
Donc quand vous voyez
ELEMENT.quelqueChose()
ou
ELEMENT.autreChose
Cela fait référence à ce que contient l'instance de l'objet, l'objet en cours pour simplifier.
En fait l'objet est une sorte de moule, son instance la création à partir du moule....bien sûr ce n'est qu'une image pour être plus précis tout est objet en JavaScript même les fonctions et inversement mais cela va pas vous éclairer beaucoup si vous ne savez pas utiliser correctement une fonction commencez par là:
https://duckduckgo.com/?q=les+fonctions+javascript
+ voir comment fonctionne les tableaux(Array) pour savoir comment y accéder/manipuler si vous n'êtes pas au point dessus.
13 mai 2022 à 20:49
https://www.javascripttutorial.net/javascript-dom/javascript-dispatchevent/
Notez que le paramètre qui doit être utilisé doit être un objet "Event" donc vous ne pouvez pas l'utiliser directement mais devez passer par l'exemple.
Pour l'instant sans l'astuce AJAX (qui fait des requêtes asynchrones au serveur) il n'y a donc pas vraiment d'intérêt à l'utiliser.
A vous de voir si vous y tenez.