11548 sujets

JavaScript, DOM et API Web HTML5

Changer la couleur d'un input dynamiquement

Bonjour,

je voudrais changer la couleur de fond d'un INPUT en fonction d'un click sur un bouton. J'arrive à changer la couleur du texte, mais pas celle du fond...


<input type = 'text' name = 'coul' value = '' size = '3'>
<INPUT TYPE="button" value="Changer" onClick="document.main_form.coul.value = '#CCFF33'; document.main_form.coul.style.bgcolor='#CCFF33';">


Si quelqu'n a une idée, je suis preneur.

Nitrobear
Modifié par nitrobear (14 Mar 2005 - 21:09)
Désolé de ne pas mettre présenté, je pensais le faire en suivant, dans un autre forum.

Je suis en train de parcourir les divers forums et articles du site, qui sont vraiment très bien. Pleins de choses intéressantes.

Je suis développeur Php depuis 6 ans, et j'essaie de faire cette petite modification en JavaScript, je suis sure que c'est bête, mais impossible de trouver...

Encore désolé, mais je ne voulais spécialement polluer ce forum avec une présentation.

Jean
Modérateur
Je pense qu'il ne manquait qu'un petit bonjour de ta part. Smiley cligne

Bienvenue à toi sur les forums.

Pour changer la couleur de fond avec Javascript, tu dois faire référence à la propriété "backgroundColor" au lieu de "bgcolor".
Modifié par Merkel (14 Mar 2005 - 21:17)
Wé, c'était juste pour le bonjour, si tu relis ton message, tu comprendras sûrement pourquoi j'ai réagis comme ça Smiley cligne
J'irais plus molo la prochaine fois Smiley langue
Salut... j'ai apporté quelques modifications esthétiques et XHTMLisé ton code un peu... bon tu prends et tu laisse Smiley langue 

<input id="coul" type="text" size="3" />
<input type="button" value="Changer" 
       onClick="
document.getElementById('coul').style.backgroundColor='#CCFF33'; 
document.getElementById('coul').style.color='#CCFF33';
       " />

Modifié par LilJim (16 Mar 2005 - 16:14)
LilJim a écrit :
Salut... j'ai apporté quelques modifications esthétiques et XHTMLisé ton code un peu... bon tu prends et tu laisse Smiley langue 

<input id="coul" type="text" size="3" />
<input type="button" value="Changer" 
       onClick="
document.getElementById('coul').style.backgroundColor='#CCFF33'; 
document.getElementById('coul').style.color='#CCFF33';
       " />


Merci de partager ta solution, qui a le mérite de fonctionner. Tu pourrais encore aller plus loin en proposant une une version où le code javascript serait séparé du corps (X)HTML. Cela permettrait de le réutiliser plus simplement et sans surcharger les pages, tout en étant plus proche des normes.

Olivier Patry (ElMoustiko) donne de bons exemples de javascript conçu dans cette optique sur son site, si des fois tu veux t'en inspirer :
http://www.elmoustikoblog.net/tutoriels/js/lien_extern/
Modifié par jb_gfx (16 Mar 2005 - 17:21)
lien_extern est pas vraiment un exemple de "bons exemples de javascript conçu dans cette optique" Smiley langue En effet, c'est plus de l'ordre du hack qu'autre chose Smiley cligne
Mais bon, c'est pas intrusif, et c'est à peu près propre. Par ailleurs, en autre utilisation que le détournement du target="_blank" ce petit script est très bien. (à mon gout Smiley cligne )
Si bien sûr, mais pour avoir une version qui fonctionne sous IE il deviens nécessaire de passer par du javascript (en plus).
Sujet clos
Aller à