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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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
et pour le css
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 <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>
Code css : 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 #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 }
Partager