Ne pas devoir recréer un script pour chaque <div>
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 :
Merci d'avance pour votre aide.
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 :
<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.
3 réponses
-
Bonjour,
Il te suffit de faire une fonction qui prend en paramètre le nom de la couleur et d'appeler la fonction avec un paramètre différent à chaque fois :
<script>function couleur(maCouleur) { document.getElementById("a").style.background = maCouleur;} </script>
<a onclick="couleur('vert')">Vert</a> - <a onclick="couleur('rouge')">Rouge</a> -
Merci pour ta réponse.
Cela allège un peu le Javascript.
J'obtiens ceci (pas moyen d'éviter de devoir recréer une function pour chaque <div> sachant que mes couleurs de background seront toujours les même ?) :
<script>
function couleur1(color1) {
document.getElementById("a").style.background = color1;}
function couleur2(color2) {
document.getElementById("b").style.background = color2;}
</script>
<a onclick="couleur1('green')">Vert</a> - <a onclick="couleur1('red')">Rouge</a>
<div id="a">TEXTE1</div>
<br><br>
<a onclick="couleur2('green')">Vert</a> - <a onclick="couleur2('red')">Rouge</a>
<div id="b">TEXTE2</div> -
Un membre m'a proposé ceci, c'est exactement ce que je recherchais (alléger le script pour le rendre "disponible" pour tout les div) :
Merci pour votre aide.
<html><head>
<style>
a {
background: white;
color: black
}
b {
background: white;
color: black
}
c {
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 />
<!-- Lien pour changer le background du TEXTE3 -->
<a onclick="changeColor('c','green')">Vert</a> - <a onclick="changeColor('c','red')">Rouge</a>
<div id="c">TEXTE2</div><br /><br />
<script>
function changeColor(elementId, color){
document.getElementById(elementId).style.backgroundColor = color
}
</script>
</body>
</html>
