Changement de couleur pour tous les elements ?
bonsoire a tout le monde.
mon probleme c'est quand j'ajoute du texte avec append() a un div , ma fonction js change que la couleur du premier élément ajoute sans savoir la raison , tout les autre element reste avec la meme couleur declaré au css
quand j'ajoute des éléments avec le bouton ajouter il s'ajoute comme une liste
apres quand je change de couleur avec l'input color juste le 1er text de la liste change , une solution peut etre ?
voici la zone html
Code:
1
2
3
4
5
6
7
| <tr><td><label>Menu</label></td><td><input id="MenuInput" name="varMenu" placeholder="Menu name" required /></td></tr>
<tr><td><label>Ingredients</label></td><td><input id="IngredientInput" name="varIngred" placeholder="Ingreient name" required /></td></tr>
<tr><td> </td><td> <input id="append" type="button" value="Ajouter" /></td></tr>
<tr><td><label>Menu color </td><td> <input name="MenuColor" id="Menu-color" type="color" onchange="getColorValMenu(MenuColor.value)" /></td></tr>
<tr><td><label>Ingredient color</td><td> <input name="IngredientColor" id="Ingredient-color" type="color" onchange="getColorValIngred(IngredientColor.value)" /></td></tr>
<div id=div-titlessResto3 >
</div> |
le js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <script type="text/javascript">
$("#append").click(function () {
var Menu = document.getElementById('MenuInput').value;
var Ingredient = document.getElementById('IngredientInput').value;
$('#div-titlessResto3').append("<p id='userRestoMenu'>"+Menu+"</p></br><p id='userRestoIngred'>"+Ingredient+"</p> ");
});
function getColorValMenu(colorValue){
document.getElementById('userRestoMenu').style.color= colorValue;
}
function getColorValIngred(colorValue){
document.getElementById('userRestoIngred').style.color= colorValue;
}
</script> |
et pour le css
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| #userRestoMenu{
font-size: 12pt;
color: #ffffff;
text-align:center;
}
#userRestoIngred{
font-size: 10pt;
color: #ffffff;
text-align:center;
}
#div-tel-restaurant3 {
position:absolute;
right:10px;
background-image:url(nexus6-1.png);
position:absolute;
top:150px;
width:300px;
height:532px;
z-index: 10;
background-repeat:no-repeat;
right:10px
} |
