Portfolio en grille - Fermer détail du projet

Par MarieD83, il y a 10 ans

Javascript

Bonjour,

J'ai réalisé un portfolio en grille (en suivant le tutoriel sur Grafikart à ce sujet). Mais j'aimerais ajouter la possibilité de fermer le détail du projet (class="work_detail") après l'avoir ouvert. J'ai donc insérer une image "croix" (class="remove") en haut à droite de chaque détail de projet.
J'ai ensuite essayé de créer ces codes Javascript avec un alert pour voir la réaction :

alert('Test test'); }); ``` ``` document.getElementByClassName("remove").onclick = function(){ alert('Test test'); }); ``` Mais au clic sur la croix, rien ne se passe. Avez-vous une idée du problème ? Merci d'avance

5 réponses

Azorgh, il y a 10 ans

Hello,

Pour information, le premier code que tu as montré est du javascript qui utilise jQuery. (Utilise tu jQuery ?).
Le second est du Javascript pur.

Pour ce qui est de l'alert qui ne s'affiche pas, as tu regardé dans la console si tu as des erreurs ?

sizo0, il y a 10 ans

Essaye de reproduire le même problème dans Plunker ou JSFiddle.

MarieD83, il y a 10 ans

Merci pour vos réponses ! Je n'utilise pas le jQuery alors j'ai gardé seulement le deuxième code. Mais est-ce que ce serait mieux que j'utilise jQuery ?
J'avais une erreur dans la console, il m'affichait "document.getElementByClassName is not a function". Apparemment l'écriture correcte est "getElementsByClassName", j'ai donc modifié. Maintenant plus d'erreur dans la console mais cela n'affiche toujours pas l'alert.

Azorgh, il y a 10 ans

Alors jQuery te permet d'avoir une grosse surcouche JS avec pas mal de fonctions et tout ça.
Mais c'est très bien que tu t'en sorte sans, ca te permet de voir le "vrai" js et c'est surtout beaucoup moins lourd.

Ensuite, pour le nom de la méthode, Elements prend en effet un s parce que tu récupère plusieurs élements via cette méthode. (Comparé à un ID qui doit être unique).

Préfère utiliser la méthode addEventListener comme il suit :

function close(event){ event.preventDefault(); //Si c'est un lien, ça empeche de suivre le lien alert('ici'); } var remove_buttons = document.getElementsByClassName("remove"); remove_buttons.addEventListener("click", close, false);
MarieD83, il y a 10 ans

J'ai répondu un peu trop vite dans mon précédent post, en réalité j'utilise jQuery.

Je suis arrivée à créer ce bouton pour fermer le détail du projet. Je le créé directement dans le javascript. Lorsque jdéroule le détail du projet et que je clique ensuite sur la croix, ça fonctionne parfaitement. MAIS lorsque j'affiche le détail de plusieurs projets avant de cliquer sur la croix, ça ne marche plus.

Vous pouvez voir le code et le problème ici : https://jsfiddle.net/marieD83/pv04dyay/1/
Avez-vous une idée du problème ?
Merci d'avance

UPDATE : Le problème venait de l'ID du bouton. Quand j'ouvrais plusieurs projet, il ne savait plus lequel fermer. J'ai donc remplacé document.getElementById("remove") par $active[0].querySelector("#remove"). Maintenant plus de soucis !