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

**Finelarme** · 23/01/2016, 17h54

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci d'avance pour votre aide.

**SylvainPV** · 23/01/2016, 18h04

Séparer en plusieurs balises <script> ne sert ici à rien, tu peux tout mettre dans une seule balise <script> déclarée en fin de fichier avant </body>, ça aura le même effet.

Pour encore raccourcir le code, il faut factoriser et comme toujours, il s'agit de déclarer les bonnes fonctions. Dans ton exemple, tes 4 fonctions font la même chose : changer la couleur d'un certain élément. Donc le plus sage à faire est de déclarer une fonction changerCouleur qui prend deux arguments: la couleur et l'élément.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Finelarme** · 23/01/2016, 20h07

Merci beaucoup pour votre réponse. C'est exactement ce que je recherchais.

J'ai compris le raisonnement du script, c'est parfait.

En effet cela allège grandement les choses.

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

JavaScript

Discussions similaires

Partager

Partager