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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Ne pas devoir recréer un script pour chaque <div>

Finelarme

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 :

<html>
<head>
<style>
a {
background: white;
color: black
}
b {
background: white;
color: black
}
</style>
</head>
<body>
<script>function green1() {
document.getElementById("a" ).style.background = "green";}
</script>
<script>function red1() {
document.getElementById("a" ).style.background = "red";}
</script>
<script>function green2() {
document.getElementById("b" ).style.background = "green";}
</script>
<script>function red2() {
document.getElementById("b" ).style.background = "red";}
</script>
<a onclick="green1()">Vert</a> - <a onclick="red1()">Rouge</a>
<div id="a">TEXTE1</div><br /><br />
<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.

Publicité

SICKofitALL

misanthrope

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

Code :

<html>
<head>
<style>
#a {
background: white;
color: black
}
#b {
background: white;
color: black
}
</style>
<script>
var action = {};
window.onload = function ()
{
action = {
divA: document.getElementById("a" ),
divB: document.getElementById("b" ),
green1: function ()
{
this.divA.style.background = "green";
},
green2: function ()
{
this.divB.style.background = "green";
},
red1: function ()
{
this.divA.style.background = "red";
},
red2: function ()
{
this.divB.style.background = "red";
}
};
}
</script>
</head>
<body>
<a onclick="action.green1()">Vert</a> - <a onclick="action.red1()">Rouge</a>
<div id="a">TEXTE1</div><br /><br />
<a onclick="action.green2()">Vert</a> - <a onclick="action.red2()">Rouge</a>
<div id="b">TEXTE2</div><br /><br />
</body>
</html>

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

Finelarme

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 :

<html><head>
<style>
a {
background: white;
color: black
}
b {
background: white;
color: black
}
c {
background: white;
color: black
}
</style>
</head>
<body>
<a onclick="changeColor('a','green')">Vert</a> - <a onclick="changeColor('a','red')">Rouge</a>
<div id="a">TEXTE1</div><br /><br />
<a onclick="changeColor('b','green')">Vert</a> - <a onclick="changeColor('b','red')">Rouge</a>
<div id="b">TEXTE2</div><br /><br />
<a onclick="changeColor('c','green')">Vert</a> - <a onclick="changeColor('c','red')">Rouge</a>
<div id="c">TEXTE3</div><br /><br />
<script>
function changeColor(elementId, color){
document.getElementById(elementId).style.backgroundColor = color
}
</script>
</body>
</html>

SICKofitALL

misanthrope

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

MaybeEijOrNot

but someone at least

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

Code :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Page de test</title>
<style type="text/css">
div {
background-color: white;
color: black;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
<script type="text/javascript">
var myJS = {};
window.onload = function() {
myJS = {
ChangeColor: function(id,colorName) {
document.getElementById(id).className = colorName;
}
};
};
</script>
</head>
<body>
<a href="javascript:myJS.ChangeColor('div1','red');">Rouge</a> - <a href="javascript:myJS.ChangeColor('div1','green');">Vert</a>
<div id="div1">Texte 1</div><br /><br />
<a href="javascript:myJS.ChangeColor('div2','red');">Rouge</a> - <a href="javascript:myJS.ChangeColor('div2','green');">Vert</a>
<div id="div2">Texte 2</div><br /><br />
<a href="javascript:myJS.ChangeColor('div3','red');">Rouge</a> - <a href="javascript:myJS.ChangeColor('div3','green');">Vert</a>
<div id="div3">Texte 3</div>
</body>
</html>

FORUM HardWare.fr

Programmation

Javascript/Node.js

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

Sujets relatifs
[Resolu]Un script qui active un "bouton moderne"	[Resolu] Une script qui valide une formulaire Web
Nouvelle formule dans un script	Appel batch à partir script powershell
Powershell - Problème script création d'utilisateur dans l'AD	Arrêt d'un PC avec un script batch
Script BATH	aide pour finaliser un script
Script de sondage	[Débutant] pour faire un script greasemonkey
Plus de sujets relatifs à : Ne pas devoir recréer un script pour chaque <div>

Page générée en 0.076 secondes