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>
  4. <style>
  5. a {
  6.     background: white;
  7.     color: black
  8. }
  10. b {
  11.     background: white;
  12.     color: black
  13. }
  14. </style>
  16. </head>
  18. <body>
  20. <!-- script TEXTE1 -->
  22. <script>function green1() {
  23. document.getElementById("a" ).style.background = "green";}
  24. </script>
  26. <script>function red1() {
  27. document.getElementById("a" ).style.background = "red";}
  28. </script>
  30. <!-- script TEXTE2 -->
  32. <script>function green2() {
  33. document.getElementById("b" ).style.background = "green";}
  34. </script>
  36. <script>function red2() {
  37. document.getElementById("b" ).style.background = "red";}
  38. </script>
  40. <!-- Lien pour changer le background du TEXTE1 -->
  42. <a onclick="green1()">Vert</a> - <a onclick="red1()">Rouge</a>
  44. <div id="a">TEXTE1</div><br /><br />
  46. <!-- Lien pour changer le background du TEXTE2 -->
  48. <a onclick="green2()">Vert</a> - <a onclick="red2()">Rouge</a>
  50. <div id="b">TEXTE2</div><br /><br />
  52. </body>
  54. </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>
  3. <style>
  4. a {
  5.     background: white;
  6.     color: black
  7. }
  9. b {
  10.     background: white;
  11.     color: black
  12. }
  14. c {
  15.     background: white;
  16.     color: black
  17. }
  19. </style>
  21. </head>
  23. <body>
  25. <!-- Lien pour changer le background du TEXTE1 -->
  27. <a onclick="changeColor('a','green')">Vert</a> - <a onclick="changeColor('a','red')">Rouge</a>
  29. <div id="a">TEXTE1</div><br /><br />
  31. <!-- Lien pour changer le background du TEXTE2 -->
  33. <a onclick="changeColor('b','green')">Vert</a> -   <a onclick="changeColor('b','red')">Rouge</a>
  35. <div id="b">TEXTE2</div><br /><br />
  37. <!-- Lien pour changer le background du TEXTE3 -->
  39. <a onclick="changeColor('c','green')">Vert</a> -   <a onclick="changeColor('c','red')">Rouge</a>
  41. <div id="c">TEXTE3</div><br /><br />
  43. <script>
  44.   function changeColor(elementId, color){
  45.     document.getElementById(elementId).style.backgroundColor = color
  46.   }
  47. </script> 
  49. </body>
  51. </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