11521 sujets

JavaScript, DOM et API Web HTML5

Une fonction pour plusieurs boutons

Hellow tout le monde,

J'ai un souci sur lequel je bute depuis quelques temps :
En gros, j'ai un projet de site (en Symfony) pour un pote qui veut vendre des T-Shirt, en dessous de chaque T-Shirt j'ai un bouton "commander" qui, au clic, doit disparaitre et afficher à la place un joli formulaire de commande (affichage de Twig). Le formulaire est toujours le même.
Comment fichtre s'y prendre pour que au clic, le bouton cliqué affiche le formulaire concerné, qui lui est dédié dans sa petite div dédiée, en supprimant le bouton cliqué ? Je n'arrive pas à me servir de "this", j'ai trouvé des trucs en cherchant mais rien qui s'applique à mon cas spécifique, rien qui marche. Voici un extrait de mon code (projet Symfony) :

<code>
<div>
<div class=" testBouton" id="boutonCommandeTShirt">
<button onclick="this.style.display='none'" class="boutonCommander">Commander</button>
</div>

<div class="formCommande">
{{ include('commande/formulaireCommande.html.twig') }}
</div>
</code>


Dans ce code j'ai essayé de contourner le problème avec un onclick dans le html au lieu d'un addEventListener, ca marche bien pour faire disparaitre le bon bouton mais j'ai toujours rien pour l'affichage du formulaire : est il possible de rajouter quelquechose au niveau du onClick pour ca ?

J'ai aussi essayé l'écouteur d'évènements avec display.hide() (pour le bouton) et display.show()(pour le formulaire) dans mon Js, d'autres choses aussi mais j'en reviens toujours au même problème : je n'arrive pas à trouver comment je cible l'élément particulier sur lequel je clique .

Une âme charitable de passage pourrait-elle m'éclairer ? Smiley confused
Hello,

Je pense qu'il faut laisser le 'this' de côté. Il n'est pas là le problème. Le 'this' içi renvoie au bouton lui-même. Il faudrait faire un console.log(this) et regarder le résultat dans la console.

Il faut, si possible, créer un fichier externe .js pour y mettre le code js. Donc fini les 'onclick', fini le js inline dans le HTML.

J'aurais essayé quelque chose du genre : 


<div>
<button id="formButton" class="boutonCommander">Commander</button>
</div>

<div id="formCommande" class="formCommande">
{{ include('commande/formulaireCommande.html.twig') }}
</div>

</code>





const formButton = document.getElementById('formButton');
const formCommande = document.getElementById('formCommande');

formButton.addEventListener('click', function() {
   formCommande.style.display = 'block';
})
Salut Allan, et merci pour ta réponse !

Je ne l'avais pas vue ! Je suis nouveau sur Alsacréations , j'ai pas vu de notif concernant un retour à mon message, pas d'alerte, rien, et ni en cliquant sur le message ; j'ai vu aujourd'hui une notif dans la boite mail, j'ai donc accouru pour lire ton message ^^

Mon souci avec ta réponse c'est que j'ai toute une série de blocs "bouton/div a actionner", et la fonction doit marcher pour tous mais un seul à la fois, donc je ne peux pas les appeler avec getElementById() puisque je ne peux pas avoir le même Id pour des composants différents. getElementsByClass() les appelle tous en même temps, donc pas bon non plus.

J'ai trouvé un truc un peu biscornu je pense, mais qui a le mérite de fonctionner : 


$(document).ready(
    function ($) {
        abonnement();

        function abonnement() {
// déclenche au clic la fonction sur chacun des boutons 
                $(".boutonCommander").on("click", function () {
                    afficherDetailCommande();
                });
        }

// sélectionne le bouton ou l'évènement s'est produit, remonte à son noeud parent, supprime le bouton, puis insère une div
        function afficherDetailCommande() {
            let bouton = event.target;
            let parentBouton = bouton.parentNode;
            let boutons = $(".boutonCommander");
            var test = document.createElement("div");
            test.textContent='C est le test';
            bouton.remove();
            parentBouton.appendChild(test);
            if (boutons !== bouton){
                boutons.show();
            }
        }
    }
    );



De cette manière ça marche comme je l'attends, ce qui m'emplit de satisfaction. Event.target m'est indiqué comme déprécié par l'IDE mais bon ..
Bien sûr comme toujours, sitôt résolu ce problème en est apparu un nouveau : je peux insérer une div avec du texte, mais pas mon {{form (formCommande)}}, ca marche pas Smiley bawling , rien ne s'affiche à part le bouton, car c'est un input. {{ include('commande/formulaireCommande.html.twig') }} non plus, ca me fait un bug car soi disant ma variable commandeForm n'existe pas ... Smiley sweatdrop
C'est un problème PHP / Symfony donc je vais pas t'en demander plus ici, je vais trouver le forum approprié.

Encore merci pour ton aide !
Sujet clos
Aller à