Reconnaitre un button - optimisation de code

Reconnaitre un button - optimisation de code - Javascript/Node.js - Programmation

Marsh Posté le 27-11-2021 à 10:32:38    

Bonjour !
 
Je cherche à optimiser mon code, je voudrais pouvoir reconnaitre sur quel button j'ai cliqué sur ma page, car j'ai ce code répété 20 fois, pour 20 boutons :
 

Code :
  1. function plusHeureFinChambreButton()  {
  2.  
  3.     var xhttp = new XMLHttpRequest();
  4.     xhttp.open("GET", "plusHeureFinChambreButton", true);
  5.     xhttp.send();
  6.     getHeureFinChambre();
  7.  
  8. }


 
Je cherche à faire comme je fais avec Android, on attribue un tag au bouton et ensuite on a juste à faire un getTag, dans onClick()
 

Code :
  1. previousButton.setTag(1);
  2. nextButton.setTag(2);
  3.  
  4. public void onClick(View v) {
  5.         int buttonIndex = (int) v.getTag();
  6.  
  7.         // previous
  8.         if (buttonIndex == 1) { blabla
  9.  
  10.         // next
  11.         if (buttonIndex == 2) { blabla


 
         
Est ce possible ?
 
Merci d'avance


Message édité par Lt Ripley le 27-11-2021 à 10:55:44

---------------
Mes apps  |  Viens coder  |  Mon topal de vente
Reply

Marsh Posté le 27-11-2021 à 10:32:38   

Reply

Marsh Posté le 27-11-2021 à 19:44:59    

Ah je viens de trouver ça, je vais essayer
 
https://i.imgur.com/Eov1Jtw.png
 
Edit : je confirme ça marche bien !


Message édité par Lt Ripley le 27-11-2021 à 20:31:30

---------------
Mes apps  |  Viens coder  |  Mon topal de vente
Reply

Marsh Posté le 28-11-2021 à 20:15:03    

Je répond peut être trop tard, mais plutôt que d'ajouter du code à chaque bouton avec un lien vers une fonction quand il est clické, tu peux juste faire.
 
 

Code :
  1. <script>
  2.   const buttonArray = document.querySelectorAll("button" );
  4.   buttonArray.forEach((buttonItem) => {
  5.     buttonItem.addEventListener("click", (e) => {
  6.       console.log(e.target.id);  // ou alert si tu préfère alert
  7.     });
  8.   });
  9. </script>


 
L'avantage avec ce code est que tu n'as pas à rajouter un bout de code à chaque boutons, et tu peux ajouter autant de bouton que tu veux.


Message édité par reroll le 28-11-2021 à 20:16:05
Reply

Marsh Posté le 29-11-2021 à 09:35:24    

Merci j'aime bien ta façon de faire.
 
Si je veux faire un switch je peux faire comme ça ?  (c'est pour info, en effet j'ai déjà recodé (et gagné pas mal de lignes de code))
 

Code :
  1. <script>
  2.   const buttonArray = document.querySelectorAll("button" );
  3.   buttonArray.forEach((buttonItem) => {
  4.     buttonItem.addEventListener("click", (e) => {
  5.       console.log(e.target.id);  // ou alert si tu préfère alert
  6.  
  7.       switch(e.target.id)  {
  8.  
  9.          case "plusTempChambreButton":
  10.              xhttp.open("GET", "plusTempChambreButton", true);
  11.              break;
  12.  
  13.          case "moinsTempChambreButton":
  14.              xhttp.open("GET", "moinsTempChambreButton", true);
  15.              break;
  16.  
  17.          //Etc..
  18.  
  19.        }
  20.  
  21.        xhttp.send();
  22.       
  23.  
  24.     });
  25.   });
  26. </script>


Message édité par Lt Ripley le 29-11-2021 à 09:40:13

---------------
Mes apps  |  Viens coder  |  Mon topal de vente
Reply

Marsh Posté le 29-11-2021 à 09:55:02    

En toute logique ça devrait fonctionner.
 
Personnellement je ferai :
 

Code :
  1. const buttonId = e.target.id
  3. switch (buttonId)
  5. ...


 
Mais c'est ma façon de coder, je préfère assigner des variables et les manipuler ensuite.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed