Bonsoir,

Je cherche à changer le background de plusieurs divs, selon la valeur de plusieurs input.

Voici mes inputs :

<p>
<label for="id_couleur_texte">Couleur du texte <span>*</span> :</label> 
<input id="id_couleur_texte" name="couleur_texte" type="text" maxlength="7" class="very-small-input color" value="#1D252A" />
</p> 
<p> 
<label for="id_couleur_barre">Couleur de la barre <span>*</span> :</label> 
<input id="id_couleur_barre" name="couleur_barre" type="text" maxlength="7" class="very-small-input color" value="#4B5B6B" /> 
</p> 
<p> 
<label for="id_couleur_fond_news">Couleur du fond des news <span>*</span> :</label> 
<input id="id_couleur_fond_news" name="couleur_fond_news" type="text" maxlength="7" class="very-small-input color" value="#E3E9EC" />
</p> 
<p> 
<label for="id_couleur_fond_app">Couleur du fond de l'application <span>*</span> :</label> 
<input id="id_couleur_fond_app" name="couleur_fond_app" type="text" maxlength="7" class="very-small-input color" value="#4B5B6B" />
</p>

Mes backgrounds à changer :

<div id="iphone">
	<div id="ecran_iphone">
		<div id="fond_article">
			<p id="title">Titre de mon article</p>
			<p id="author">Auteur</p>
			<hr>
			<p>Ceci est un exemple d\'article. Si vous avez des problèmes pour paramétrer, n\'hésitez pas à contacter le support sur <a href="#">ce lien</a>.</p>
		</div>
	</div>
</div>

Ce que je tente de faire

- Selon la valeur de #id_couleur_texte en input, je désire changer la couleur texte du div #ecran_iphone.
- Selon la valeur de #id_fond_news en input, je désire changer la background du div #fond_article.
- Selon la valeur de #id_fond_app en input, je désire changer la background du div #ecran_iphone.

Ce que j'ai réalisé pour l'instant

J'utilise Jquery pour me simplifier les tâches.

<script>
  $('#id_couleur_texte').live('click', function() {
      $('#ecran_ihone p').css({color : "white"});
   });
</script>

Dans mon script, j'ai mis en dur, la couleur blanche, mais celle-ci doit s'adapter selon la couleur du input, c'était avant tout pour tester, et cela ne fonctionne pas.

Merci de votre aide

$('#ecran_ihone p').css({color : $('#id_couleur_texte').val()});

Salut !

Je te conseille d'utiliser l'événement change, comme ça à chaque ajout de caractère le handler sera appelé.

Ensuite, ça semble bien sauf que tu as oublié le p de iphone !!

Utilises val pour obtenir la valeur

$('#id_couleur_texte').change(function() {
      $('#ecran_iphone p').css('color', $(this).val());
   });

edit: petit fail de parenthèses