Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript [HELP] Problème de rafraichissement de couleurs

[HELP] Problème de rafraichissement de couleurs

22 réponses
Avatar
John
Bonjour,
j'ai fait un script pour réŽviser du voc qui affiche alŽatoirement
les éŽléŽments d'une liste (voir ci-dessous). Le problème c'est que je
voudrais que les couleurs du texte, du fond de tableau et même du fond
de fenêtre, puissent changer aléŽatoirement ˆà condition que la
variable Bmod (par ex.) soit ˆ 1. Or le texte change mais pas ces
couleurs qui sont donnŽées une fois pour toutes. Quelqu'un pourrait-il
me dire ce qui cloche?

Merci d'avance,

John


<html><head>
<meta name=appl centent=linguae>
<script language='javascript'>
var Colors=new Array();
var Version=new Array();
var Theme=new Array();
var Question;
var Answer;
var Sense=1;
var Qptr;
var Bptr;
var Pcol="CCCCCC";
var Bcol="";
var Fcol="006666>";
var Pmod="";
var Bmod="1";
var Fmod="";

Colors[0]="00FF00";
Colors[1]="009933";
Colors[2]="006666";
Colors[3]="33FFCC";
Colors[4]="00FFFF";
Colors[5]="33CCCC";
Colors[6]="0099FF";
Colors[7]="0033FF";
Colors[8]="663399";
Colors[9]="9933CC";
Colors[10]="CC33FF";
Colors[11]="660066";
Colors[12]="999966";
Colors[13]="996666";
Colors[14]="996600";
Colors[15]="660000";
Colors[16]="FFCCCC";
Colors[17]="FF3366";
Colors[18]="CC0000";
Colors[19]="990000";
Colors[20]="FFFF99";
Colors[21]="FFFF00";
Colors[22]="FFCC00";
Colors[23]="FF9900";
Colors[24]="000000";
Colors[25]="CCCCCC";
Colors[26]="CCCC00";
Colors[27]="FFFFFF";

Version[0]="&#960;&#945;&#953;&#948;&#949;&#8059;&#969; ";
Theme[0]=" j'&eacute;duque, j'&eacute;l&egrave;ve";
Version[1]="&#955;&#8051;&#947;&#969; ";
Theme[1]=" je dis, je parle, j'appelle";
Version[2]="&#947;&#961;&#8049;&#966;&#969; ";
Theme[2]=" j'&eacute;cris, je dessine";
Version[3]="&#7973;&#954;&#969; ";
Theme[3]=" je viens, je suis l&agrave;";
Version[4]="&#955;&#949;&#8055;&#960;&#969; ";
Theme[4]=" je laisse, je quitte";
Version[5]="&#966;&#8051;&#961;&#969; ";
Theme[5]=" je porte, j'apporte, je supporte";
Version[6]="&#956;&#8051;&#957;... &#948;&#8051; ";
Theme[6]=" d'une part... d'autre part; (certes)... mais; ... et...";
Version[7]="&#954;&#945;&#8055; ";
Theme[7]=" et; m&ecirc;me, aussi";
Version[8]="&#957;&#8166;&#957; ";
Theme[8]=" maintenant";
Version[9]="&#7956;&#960;&#949;&#953;&#964;&#945; ";
Theme[9]=" ensuite";
Version[10]="&#960;&#945;&#953;&#948;&#949;&#8059;&#949;&#964;&#949; ";
Theme[10]=" est-ce que vous &eacute;duquez?";

function Disp(fld1,fld2){
Qptr = Math.round(Math.random()*(Theme.length-1));
if (Sense == 1) { Question = Theme[Qptr] }
if (Sense == 2) { Question = Version[Qptr] }
if (Bmod == 1) {
Bptr = Math.round(Math.random()*(Colors.length-1));
Bcol = Colors[Bptr];
}
} if(document.getElementById) {
document.getElementById(fld1).innerHTML = Question;
document.getElementById(fld2).innerHTML = '';
}
else alert('Sorry: incompatible browser.');
}
function Trad(fld){
if (Sense == 1) { Answer = Version[Qptr] }
if (Sense == 2) { Answer = Theme[Qptr] }
if(document.getElementById)
document.getElementById(fld).innerHTML = Answer ;
else alert('Sorry:incompatible browser.');
}
function Ordr(){
if (Sense == 1) { Sense = 2 }
else { Sense = 1 }
}

</script>
</head>
<body>
<script language='javascript'>
document.write('<body bgcolor='+ Pcol +' onLoad="Disp(\'quest\',\'answ\')">');
document.write('<br>&nbsp;&nbsp;&nbsp;');
document.write('<input type=button value=\' -> \' ');
document.write('onClick="Disp(\'quest\',\'answ\')">');
document.write('<input type=checkbox value=on onChange="Ordr()">');
document.write('<input type=button value=\' = \'
onClick="Trad(\'answ\')">'); document.write('<br><br><br><br><br><br>');
document.write('<blockquote><p align=center>'); document.write('<table
bgcolor=' + Bcol + ' cellpadding=30 border=0>');
document.write('<tbody>'); document.write('<tr>');
document.write('<td align=center>');
document.write('<h1><font color=\''+ Fcol +'\' size=+3><div
id=\'quest\'>'); document.write('</div></font></h1>');
document.write('</td>');
document.write('</tr>');
document.write('<tr>');
document.write('<td align=center>');
document.write('<h1><b><font color=\''+ Fcol +'\' size=+4><div
id=\'answ\'>'); document.write('</div></font></b></h1>');
document.write('</td>');
document.write('</tr>');
document.write('</tbody>');
document.write('</table>');
document.write('</p></blockquote>');
document.write('</body>');
</script>
</html>
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2 3
Avatar
ASM
Le problème c'est que je
voudrais que les couleurs du texte, du fond de tableau et même du fond
de fenêtre, puissent changer aléŽatoirement ˆà condition que la
variable Bmod (par ex.) soit ˆ 1. Or le texte change mais pas ces
couleurs qui sont donnŽées une fois pour toutes. Quelqu'un pourrait-il
me dire ce qui cloche?

<html><head>
<meta name=appl centent=linguae>


??? késako : <meta name=appl centent=linguae>

<script language='javascript'>


<script type="text/javascript">

var Colors=new Array();
var Version=new Array();
var Theme=new Array();
var Question;
var Answer;
var Sense=1;
var Qptr;
var Bptr;
var Pcol="CCCCCC";
var Bcol="";
var Fcol="006666>";
var Pmod="";
var Bmod="1";
var Fmod="";

Colors[0]="00FF00";
Colors[1]="009933";
Colors[2]="006666";
Colors[3]="33FFCC";
Colors[4]="00FFFF";
.../...


Version[0]="&#960;&#945;&#953;&#948;&#949;&#8059;&#969; ";
Theme[0]=" j'&eacute;duque, j'&eacute;l&egrave;ve";


.../...

function Disp(fld1,fld2){
Qptr = Math.round(Math.random()*(Theme.length-1));
if (Sense == 1) { Question = Theme[Qptr] }
if (Sense == 2) { Question = Version[Qptr] }
if (Bmod == 1) {
Bptr = Math.round(Math.random()*(Colors.length-1));
Bcol = Colors[Bptr];
}


la prochaine } clos la fonction Disp
donc ce qui suit devrait tout kkbouiller

} if(document.getElementById) {
document.getElementById(fld1).innerHTML = Question;
document.getElementById(fld2).innerHTML = '';
}
else alert('Sorry: incompatible browser.');
}
function Trad(fld){
if (Sense == 1) { Answer = Version[Qptr] }
if (Sense == 2) { Answer = Theme[Qptr] }
if(document.getElementById)
document.getElementById(fld).innerHTML = Answer ;
else alert('Sorry:incompatible browser.');
}
function Ordr(){
if (Sense == 1) { Sense = 2 }
else { Sense = 1 }
}

</script>
</head>
<body>
<script language='javascript'>
document.write('<body bgcolor='+ Pcol +' onLoad="Disp('quest','answ')">');


il manque les " pour les attributs
et le # pour les couleurs

document.write('<body bgcolor="#'+ Pcol +'"
onLoad="Disp('quest','answ');">');

document.write('<br>&nbsp;&nbsp;&nbsp;');
.../...

document.write('<h1><font color=''+ Fcol +'' size=+3><div
id='quest'>');


même remarque que plus haut

document.write('<h1><font color="#'+ Fcol +'" size=+3><div id="quest">');

etc


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
John
On Thu, 23 Mar 2006 19:29:58 +0100, ASM wrote:


??? késako : <meta name=appl centent=linguae>
OK ça c'est content=linguae, le nom de ma cgi



<script type="text/javascript">
D'ac, mais ça change rien


.../...


la prochaine } clos la fonction Disp
donc ce qui suit devrait tout kkbouiller


cette erreur dans le post n'est pas dans le script

il manque les " pour les attributs
et le # pour les couleurs


comme mon script est envoyé depuis une cgi ça complique un peu
je ne peux pas mettre des " mais seulement des ' autour des
attributs -- et ça ne change rien...

T'as essayé le script et le changement de couleur (Bcol) marchait chez
toi????

Avatar
YD
T'as essayé le script et le changement de couleur (Bcol) marchait chez
toi????


Pourquoi cela marcherait ? Nulle part dans le script il n'y a de
changement dynamique de la couleur (ligne signalée par un
commentaire).

On peut modifier la fonction Disp comme ceci :
function Disp(fld1,fld2){
Qptr = Math.round(Math.random()*(Theme.length-1));
if (Sense == 1) { Question = Theme[Qptr] }
if (Sense == 2) { Question = Version[Qptr] }
if (Bmod == 1) {
Bptr = Math.round(Math.random()*(Colors.length-1));
Bcol = Colors[Bptr];
}
if(document.getElementById) {
document.getElementById(fld1).innerHTML = Question;
/* Affectation de la couleur ligne suivante*/
document.getElementById(fld1).style.color = '#'+Bcol;
document.getElementById(fld2).innerHTML = '';
}
else alert('Sorry: incompatible browser.');
}

Et modifier la série de document.write pour supprimer les <font> et
les remplacer par des attributs style :

document.write('<h1><div id='answ' style='color: #'+Fcol+''>');
document.write('</div></h1>');

On peut ajouter de la même manière les autres attributs du texte
(en ajoutant le nécessaire dans la valeur de style).

--
Y.D.

Avatar
YD
T'as essayé le script et le changement de couleur (Bcol) marchait chez
toi????


Pourquoi cela marcherait ? Nulle part dans le script il n'y a de
changement dynamique de la couleur.

On peut modifier la fonction Disp comme ceci (ligne signalée par
un commentaire) :
function Disp(fld1,fld2){
Qptr = Math.round(Math.random()*(Theme.length-1));
if (Sense == 1) { Question = Theme[Qptr] }
if (Sense == 2) { Question = Version[Qptr] }
if (Bmod == 1) {
Bptr = Math.round(Math.random()*(Colors.length-1));
Bcol = Colors[Bptr];
}
if(document.getElementById) {
document.getElementById(fld1).innerHTML = Question;
/* Affectation de la couleur ligne suivante*/
document.getElementById(fld1).style.color = '#'+Bcol;
document.getElementById(fld2).innerHTML = '';
}
else alert('Sorry: incompatible browser.');
}

Et modifier la série de document.write pour supprimer les <font> et
les remplacer par des attributs style :

document.write('<h1><div id='answ' style='color: #'+Fcol+''>');
document.write('</div></h1>');

On peut ajouter de la même manière les autres attributs du texte
(en ajoutant le nécessaire dans la valeur de style).

--
Y.D.

Avatar
ASM
??? késako : <meta name=appl centent=linguae>


OK ça c'est content=linguae, le nom de ma cgi


alors pourquoi n'y a t-il pas
content
et pourquoi la valeur n'a pas ses " pour la limiter ?

cette manie de compter sur la bonne volonté des brouteurs ... :-(

<script type="text/javascript">


D'ac, mais ça change rien


non, mais au moins c'est propre

le brouteur, de tte façon s'en moque et se contentera de <script>
mais risque de passer en mode "soupe de balises" alors que peut-être ce
n'est pas voulu ?

la prochaine } clos la fonction Disp
donc ce qui suit devrait tout kkbouiller


cette erreur dans le post n'est pas dans le script


comme tu essaies de balancer le code employé
pourquoi ne pas user de copier-coller ?

il manque les " pour les attributs
et le # pour les couleurs


comme mon script est envoyé depuis une cgi ça complique un peu
je ne peux pas mettre des "


je ne sais comment fonctionne une cgi
en php tu peux
il suffit de l'échapper "
comme il était montré

Je ne vois pas pourquoi un langage quelqu'il soit empêcherait d'écrire
ce qu'il y a à écrire, de quoi qu'y s'mèle ?

mais seulement des ' autour des
attributs -- et ça ne change rien...


si tu ne t'arranges pas pour que le code html ressemble à

<font color='#xxxxxx'>bla bla</font>
ou
<font color="#xxxxxx">bla bla</font>

et s'il manque #
normalement ça ne doit pas changer de couleur

T'as essayé le script et le changement de couleur (Bcol) marchait chez
toi????


Ben non ... pas essayé

de plus ces multiples document.write() sont du plus mauvais goût.
il y a de grâves erreurs dans l'idée de l'écriture du html
(BODY alors qu'il existe déjà, DIV dans H1, pleins de BR)

idée de correctif :

<html><head>
<meta name=appl content=linguae />
<script type="text/javascript">
var Version=new Array();
var Theme=new Array();
var Question;
var Answer;
var Sense=1;
var Qptr;
var Bptr;
var Pcol="#CCCCCC";
var Bcol="";
var Fcol="#006666";
var Pmod="";
var Bmod="1";
var Fmod="";

var Bcolors=new Array(
'00FF00','009933','006666','33FFCC','00FFFF','33CCCC','0099FF',
'0033FF','663399','9933CC','CC33FF','660066','999966','996666')

var Fcolors=new Array(
'996600','660000','FFCCCC','FF3366','CC0000','990000','FFFF99',
'FFFF00','FFCC00','FF9900','000000','CCCCCC','CCCC00','FFFFFF')

Version[0]="&#960;&#945;&#953;&#948;&#949;&#8059;&#969; ";
Theme[0]=" j'&eacute;duque, j'&eacute;l&egrave;ve";
Version[1]="&#955;&#8051;&#947;&#969; ";
Theme[1]=" je dis, je parle, j'appelle";
Version[2]="&#947;&#961;&#8049;&#966;&#969; ";
Theme[2]=" j'&eacute;cris, je dessine";
Version[3]="&#7973;&#954;&#969; ";
Theme[3]=" je viens, je suis l&agrave;";
Version[4]="&#955;&#949;&#8055;&#960;&#969; ";
Theme[4]=" je laisse, je quitte";
Version[5]="&#966;&#8051;&#961;&#969; ";
Theme[5]=" je porte, j'apporte, je supporte";
Version[6]="&#956;&#8051;&#957;... &#948;&#8051; ";
Theme[6]=" d'une part... d'autre part; (certes)... mais; ... et...";
Version[7]="&#954;&#945;&#8055; ";
Theme[7]=" et; m&ecirc;me, aussi";
Version[8]="&#957;&#8166;&#957; ";
Theme[8]=" maintenant";
Version[9]="&#7956;&#960;&#949;&#953;&#964;&#945; ";
Theme[9]=" ensuite";
Version[10]="&#960;&#945;&#953;&#948;&#949;&#8059;&#949;&#964;&#949; ";
Theme[10]=" est-ce que vous &eacute;duquez?";

function Disp(fld1,fld2){
if(document.getElementById) {
Qptr = Math.round(Math.random()*(Theme.length-1));
if (Sense == 1) { Question = Theme[Qptr] }
if (Sense == 2) { Question = Version[Qptr] }
if (Bmod == 1) {
Bptr = Math.round(Math.random()*(Bcolors.length-1));
getStyle('tabl').backgroundColor = '#'+Bcolors[Bptr];
getStyle('quest').color = '#'+Fcolors[Bptr];
getStyle('answ').color = '#'+Fcolors[Bptr];
}
document.getElementById(fld1).innerHTML = Question;
document.getElementById(fld2).innerHTML = '';
}
else alert('Sorry: incompatible browser.');
}
function Trad(fld){
if(document.getElementById) {
Answer = (Sense == 1)? Version[Qptr] : Theme[Qptr];
document.getElementById(fld).innerHTML = Answer ;
}
else alert('Sorry: incompatible browser.');
}
function Ordr(){ Sense = (Sense == 1)? 2 : 1; }
</script>
<script type="text/javascript">
function getStyle(elemt) {
elemt = document.layers? document.layers[elemt] :
document.getElementById?
document.getElementById(elemt).style :
document.all.elemt.style;
return elemt;
}
onload = function() {
document.body.style.background = Pcol;
Disp('quest','answ');
}
</script>
<style type="text/css">
form { text-align: center; }
input { margin: 5px 20px; vertical-align: middle;}
table { margin: auto; margin-top: 50px; border-collapse: collapse;
border-width: 0; }
td { padding: 30px; text-align: center; }
h1 { text-align: center; }
</style>
</head>
<body >
<form>
<input type="button" value=" -> " onclick="Disp('quest','answ')" />
<input type="checkbox" onclick="Ordr();" />
<input type="button" value=" = " onClick="Trad('answ');" />
</form>
<table id="tabl">
<tr><td><h1 id="quest"></h1></td></tr>
<tr><td><h1 id="answ"></h1></td></tr>
</table>
</body></html>


nota :
tu aurais pu mettre un charset utf8 et écrire le grec en utf8
--
Stephane Moriaux et son [moins] vieux Mac


Avatar
John
On Fri, 24 Mar 2006 00:36:28 +0100, ASM wrote:

et pourquoi la valeur n'a pas ses " pour la limiter ?
comme tu essaies de balancer le code employé
pourquoi ne pas user de copier-coller ?


Sûr que si on ne faisait jamais d'erreur on n'aurait pas besoin de
conseils... Les détails qui expliquent ces erreurs sont probablement sans
grande importance, mais je le proclame haut et fort: dans cette
ignorance coupable qui m'accable, j'ai toujours gardé ma foi dans le
dogme sacro-saint du copier-coller!

Je ne vois pas pourquoi un langage quelqu'il soit empêcherait d'écrire
ce qu'il y a à écrire, de quoi qu'y s'mèle ?


Ma cgi est en Perl et ce n'est pas qu'il l'empêche, mais bon il faut
échapper les " doublement ou changer l'ordre d'alternance des ' et des
" et que veux tu que je te dise?.. ça ne va pas tout seul...

de plus ces multiples document.write() sont du plus mauvais goût. Il y
a de grâves erreurs


Je suis pas un as en programmation hélas, et je débute en javascript.

idée de correctif :


Heureusement que tu me donnes cette élégante solution que je vais
méditer, sinon j'aurais cru que comme tant de piliers de channels, tu
laissais simplement libre cours à un fantasme de domination! Grand merci
donc!

John

Avatar
John
On Thu, 23 Mar 2006 23:34:02 +0100, YD wrote:


Pourquoi cela marcherait ? Nulle part dans le script il n'y a de
changement dynamique de la couleur.


Voila ce que je ne savais pas.

On peut modifier la fonction Disp comme ceci


Merci pour tout!

John

Avatar
ASM
On Fri, 24 Mar 2006 00:36:28 +0100, ASM wrote:

mais je le proclame haut et fort: dans cette
ignorance coupable qui m'accable,


:-)

Ma cgi est en Perl et ce n'est pas qu'il l'empêche, mais bon il faut
échapper les " doublement ou changer l'ordre d'alternance des ' et des
" et que veux tu que je te dise?.. ça ne va pas tout seul...


certes (je ne connais rien ni au cgi, ni au perl)
mais, si c'est trop trop pénible, il doit il y avoir moyen de faire des
includes (de pages ou de bout de pages html préalablement vérifiés
individuellement en direct)

de plus ces multiples document.write() sont du plus mauvais goût. Il y
a de grâves erreurs


Je suis pas un as en programmation hélas, et je débute en javascript.


Alors ...
Le système du document write n'est pas dynamique.
Si c'est pour faire écrire une page web par le JS (à l'interieur d'une
page créée à la main ou via php, cgi, perl) ça n'a aucun intêret, autant
balancer directement du html (ce qui a été proposé).
Le php, cgi, perl doit pouvoir créer des pages en fonction du brouteur,
si c'est là le souci.

idée de correctif :



J'y ai modifié le truc des couleurs, car assez souvent avec ce qui était
proposé, l'aléatoire faisait que le contraste entre le fond et le texte
rendait la chose illisible.
Donc 2 groupes de couleurs qu'il te faut maintenant soigner pour en
améliorer le contraste (couples Bcolors[n] Fcolors[n])

Heureusement que tu me donnes cette élégante solution que je vais
méditer, sinon j'aurais cru que comme tant de piliers de channels, tu
laissais simplement libre cours à un fantasme de domination!


Je dois dire que les bêtes erreurs de copier-coller m'agacent.
L'emploi de html mal fagoté et laborieux : pareil.

Grand merci donc!


Jamais je n'essaie de donner une soluce.
Il faut + ou - de temps pour intégrer/comprendre ce qu'il est tenté de
faire (et quand rien ne fonctionne la devinerette n'est pas facile).

Je profite pour signaler que mon IE Mac est infichu d'afficher toutes
les lettres grecques employées dans cette démo.

Si le serveur n'envoie pas de charset, il serait de bon ton de prévoir
un charset en meta. (charset compatible alphabet grec)


--
Stephane Moriaux et son [moins] vieux Mac


Avatar
Olivier Miakinen
Le 24/03/2006 12:23, ASM a écrit plein de choses intéressantes, dont :

Je profite pour signaler que mon IE Mac est infichu d'afficher toutes
les lettres grecques employées dans cette démo.


As-tu installé toutes les polices nécessaires ?

Si le serveur n'envoie pas de charset, il serait de bon ton de prévoir
un charset en meta.


Oui.

(charset compatible alphabet grec)


En l'occurrence, c'est inutile ici (tout son code est en ascii 7bits),
et de plus cela ne changera rien à ton problème d'affichage. On peut
très bien afficher du grec avec un charset prévu pour le français, ou
du japonais avec un charset prévu pour l'hébreu.

Par exemple, la page <http://www.miakinen.net/vrac/charsets/> est servie
en ISO-8859-1, ce qui ne l'empêche pas d'afficher des lettres grecques
dans la partie consacrée à CP437. Et même plus que ça : tous les
caractères que tu vois sur un fond autre que blanc ou gris sont en
dehors du charset de la page.

--
Olivier Miakinen
Troll du plus sage chez les conviviaux : le nouveau venu, avec
son clan, s'infiltre dans les groupes de nouvelles. (3 c.)

Avatar
John
On Fri, 24 Mar 2006 12:23:19 +0100, ASM wrote:
J'y ai modifié le truc des couleurs, car assez souvent avec ce qui était
proposé, l'aléatoire faisait que le contraste entre le fond et le texte
rendait la chose illisible.


Oui vraiment ta solution est excellente.

Je profite pour signaler que mon IE Mac est infichu d'afficher toutes
les lettres grecques employées dans cette démo.


Pareil pour moi. Mais sous Netscape c'est ok.

On Fri, 24 Mar 2006 12:39:09 +0100, Olivier Miakinen wrote:

As-tu installé toutes les polices nécessaires ?


Je n'ai jamais eu à installer une police spécialement pour IE. Sous Mac
OSX normalement Lucida Grande est sensée fournir le grec polytonique.
Mais c'est vrai que je n'arrive pas non plus à obtenir que la langue
Ellenika soit utilisable (grisée dans le menu) sur mon Mac. Je ne sais
pas où je pourrais télécharger une police qui me rende cette locale
accessible, ni même si cela est en rapport avec les problèmes d'IE pour
ces caractères unicode (grec étendu). Une idée?

1 2 3