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

Fermé

finelarme Messages postés 52 Date d'inscription vendredi 4 janvier 2008 Statut Membre Dernière intervention 12 septembre 2020 - 23 janv. 2016 à 17:46
finelarme Messages postés 52 Date d'inscription vendredi 4 janvier 2008 Statut Membre Dernière intervention 12 septembre 2020 - 23 janv. 2016 à 20:12

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 :

<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.

A voir également:

Ne pas devoir recréer un script pour chaque <div>
Script vidéo youtube - Guide
Div c++ - Télécharger - Langages
Ghost script - Télécharger - Polices de caractères
Page de couverture d'un devoir - Guide
Microsoft activation script - Accueil - Windows

3 réponses

Réponse 1 / 3

nichola Messages postés 111 Date d'inscription jeudi 7 juin 2007 Statut Membre Dernière intervention 24 avril 2016 11
23 janv. 2016 à 18:08

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>

Réponse 2 / 3

finelarme Messages postés 52 Date d'inscription vendredi 4 janvier 2008 Statut Membre Dernière intervention 12 septembre 2020 2
Modifié par finelarme le 23/01/2016 à 18:20

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>

Réponse 3 / 3

finelarme Messages postés 52 Date d'inscription vendredi 4 janvier 2008 Statut Membre Dernière intervention 12 septembre 2020 2
23 janv. 2016 à 20:12

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>

Discussions similaires

recherche script "les visiteurs"

La BO de la série l'enfer du devoir

musique dans l'enfer du devoir(série)

Chanson rock très connue