Ne pas devoir recréer un script pour chaque <div>

Ne pas devoir recréer un script pour chaque <div> - Javascript/Node.js - Programmation

Marsh Posté le 23-01-2016 à 17:48:19    

Bonjour,
 
J'ai un code pour changer le background d'un <div> en cliquant sur un lien, cependant j'aimerais ne pas devoir à chaque fois recréer un autre script javascript pour un autre <div>.
 
Voici mon code :
 

Code :
  1. <html>
  2. <head>
  3. <style>
  4. a {
  5.     background: white;
  6.     color: black
  7. }
  8. b {
  9.     background: white;
  10.     color: black
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <!-- script TEXTE1 -->
  16. <script>function green1() {
  17. document.getElementById("a" ).style.background = "green";}
  18. </script>
  19. <script>function red1() {
  20. document.getElementById("a" ).style.background = "red";}
  21. </script>
  22. <!-- script TEXTE2 -->
  23. <script>function green2() {
  24. document.getElementById("b" ).style.background = "green";}
  25. </script>
  26. <script>function red2() {
  27. document.getElementById("b" ).style.background = "red";}
  28. </script>
  29. <!-- Lien pour changer le background du TEXTE1 -->
  30. <a onclick="green1()">Vert</a> - <a onclick="red1()">Rouge</a>
  31. <div id="a">TEXTE1</div><br /><br />
  32. <!-- Lien pour changer le background du TEXTE2 -->
  33. <a onclick="green2()">Vert</a> - <a onclick="red2()">Rouge</a>
  34. <div id="b">TEXTE2</div><br /><br />
  35. </body>
  36. </html>


 
Merci d'avance pour votre aide.

Reply

Marsh Posté le 23-01-2016 à 17:48:19   

Reply

Marsh Posté le 23-01-2016 à 18:28:00    

Ben mets toutes tes fonctions dans un seul et même <script> nan ? :??:

Code :
  1. <html>
  2. <head>
  3. <style>
  4.  #a {
  5.   background: white;
  6.   color: black
  7.  }
  8.  #b {
  9.   background: white;
  10.   color: black
  11.  }
  12. </style>
  13. <script>
  14.  var action = {};
  15.  window.onload = function ()
  16.  {
  17.   action = {
  18.    divA: document.getElementById("a" ),
  19.    divB: document.getElementById("b" ),
  20.    green1: function ()
  21.     {
  22.      this.divA.style.background = "green";
  23.     },
  24.    green2: function ()
  25.     {
  26.      this.divB.style.background = "green";
  27.     },
  28.    red1: function ()
  29.     {
  30.      this.divA.style.background = "red";
  31.     },
  32.    red2: function ()
  33.     {
  34.      this.divB.style.background = "red";
  35.     }
  36.   };
  37.  }
  38. </script>
  39. </head>
  40. <body>
  41. <a onclick="action.green1()">Vert</a> - <a onclick="action.red1()">Rouge</a>
  42. <div id="a">TEXTE1</div><br /><br />
  43. <a onclick="action.green2()">Vert</a> - <a onclick="action.red2()">Rouge</a>
  44. <div id="b">TEXTE2</div><br /><br />
  45. </body>
  46. </html>


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 23-01-2016 à 20:13:29    

Merci beaucoup pour vos conseils. Votre script pourrait me convenir, cependant j'aimerais pouvoir l'alléger encore.
 
Un membre m'a proposé ceci, c'est ce que je recherchais :
 

Code :
  1. <html><head>
  2. <style>
  3. a {
  4.     background: white;
  5.     color: black
  6. }
  7. b {
  8.     background: white;
  9.     color: black
  10. }
  11. c {
  12.     background: white;
  13.     color: black
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <!-- Lien pour changer le background du TEXTE1 -->
  19. <a onclick="changeColor('a','green')">Vert</a> - <a onclick="changeColor('a','red')">Rouge</a>
  20. <div id="a">TEXTE1</div><br /><br />
  21. <!-- Lien pour changer le background du TEXTE2 -->
  22. <a onclick="changeColor('b','green')">Vert</a> -   <a onclick="changeColor('b','red')">Rouge</a>
  23. <div id="b">TEXTE2</div><br /><br />
  24. <!-- Lien pour changer le background du TEXTE3 -->
  25. <a onclick="changeColor('c','green')">Vert</a> -   <a onclick="changeColor('c','red')">Rouge</a>
  26. <div id="c">TEXTE3</div><br /><br />
  27. <script>
  28.   function changeColor(elementId, color){
  29.     document.getElementById(elementId).style.backgroundColor = color
  30.   }
  31. </script> 
  32. </body>
  33. </html>

Reply

Marsh Posté le 23-01-2016 à 20:32:51    

bien sur que ca marche aussi.
Au passage, ton css ne fonctionne pas, car tu appliques au tag a (celui là sera affecté), b et c. Je suppose que tu veux styler les ID #a, #b et #c


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 25-01-2016 à 17:08:04    

Mieux vaut dans ces cas là passer par des classes CSS afin de garder de la lisibilité dans le code :
 

Code :
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>Page de test</title>
  6.  <style type="text/css">
  7.   div {
  8.    background-color: white;
  9.    color: black;
  10.   }
  11.   .red {
  12.    background-color: red;
  13.   }
  14.   .green {
  15.    background-color: green;
  16.   }
  17.  </style>
  18.  <script type="text/javascript">
  19.   var myJS = {};
  20.   window.onload = function() {
  21.    myJS = {
  22.     ChangeColor: function(id,colorName) {
  23.      document.getElementById(id).className = colorName;
  24.     }
  25.    };
  26.   };
  27.  </script>
  28. </head>
  29. <body>
  30.  <a href="javascript:myJS.ChangeColor('div1','red');">Rouge</a> - <a href="javascript:myJS.ChangeColor('div1','green');">Vert</a>
  31.  <div id="div1">Texte 1</div><br /><br />
  32.  <a href="javascript:myJS.ChangeColor('div2','red');">Rouge</a> - <a href="javascript:myJS.ChangeColor('div2','green');">Vert</a>
  33.  <div id="div2">Texte 2</div><br /><br />
  34.  <a href="javascript:myJS.ChangeColor('div3','red');">Rouge</a> - <a href="javascript:myJS.ChangeColor('div3','green');">Vert</a>
  35.  <div id="div3">Texte 3</div>
  36. </body>
  37. </html>

Reply

Sujets relatifs:

Leave a Replay

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