Discussion :

[yassin123441]

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

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>

et pour le css

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
}

[Bovino]

Répété un nombre incalculable de fois : un id doit être unique dans la page !!!

[yassin123441]

le problème je peut pas mettre les 2 ligne dans un div , car j'ai un block qui comporte 2 ligne et chaque ligne doit avoir un div pour que sa couleur change avec l'input color.
y'a il pas une autre solution

[SpaceFrog]

y'a il pas une autre solution

Si on te dit qu'un id DOIT ETRE UNIQUE sur la page ...
la solution est de changer ton code html de sorte à ne pas avoir plusieurs id identiques sur la page ...