Portfolio en grille - Fermer détail du projet

MarieD83
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

MarieD83
Auteur
Réponse acceptée

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 !

Azorgh

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

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

MarieD83
Auteur

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

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);