Accueil > Forum > > > > problème avec javascript
 problème avec javascript
lundi 27 décembre 2010 à 19:35:02 |
problème avec javascript
siham2010
|
Bonjour,
Problème : rien ne s'affiche lorsque j'affecte des valeurs à la variable macouleur comme présenté ci-dessous
alors que lorsque je nome l'input d'une manière statique (c-à-d, je met Code Javascript :
<input value="000000" name="macouleur" size="6" type="text"> )
le script fonctionne bien et m'affiche les valeurs désirées en faisant passer la souris au dessus d'une palette de couleur.
N.B: le test a été réalisé sur firefox et IE8.
Code Javascript :
//formulaire utilisé dans test.php
<form id="form" name="form3" action="test.php" method="post" enctype="multipart/form-data">
<label for="couleur_amz">Couleur :</label>
Palette : <input value="000000" name="macol" size="6" type="text">
<script type="text/javascript">
var macouleur="macol";
</script>
<script type="text/javascript" src="test_js.js"></script>
</form>
//fonctions utilisées dans test_js.js
function describe1(aColor) {
if (aColor != blankColor) {
this.document.form3.macouleur.value=aColor.hex;
} else {
self.status = '';
}
}
function cellOnOver(index) {
describe1(namedColors[index]);
return false;
}
|
|
mardi 28 décembre 2010 à 10:44:54 |
Re : problème avec javascript
PetoleTeam
|
Bonjour,
- comment sont appelées les fonctions ?
- comment sont affectées les nouvelles valeurs et où ?
;O)
|
|
mardi 28 décembre 2010 à 11:19:59 |
Re : problème avec javascript
siham2010
|
les fonctions sont appelées au sein du javascript alors que dans le programme PHP je fais appel au script grâce à cette ligne
Code Javascript : <script type="text/javascript" src="test_js.js"></script> Par ailleurs, les variables sont déclarées globalement grâce à ce code :
Code Javascript : <script type="text/javascript">
var macouleur="macol";
</script>
Comment dois je les appeler
Merci bien pour ta coopération |
|
mardi 28 décembre 2010 à 12:02:57 |
Re : problème avec javascript
PetoleTeam
|
je n'y vois pas plus clair...où est ce que tu affectes une valeur à la variable macouleur.
voici un petit exemple de récupération, puisse t-il t'aider
Code Javascript : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>...</title>
</head>
<body>
<div>
<table id="T_COLOR">
<tr><td>#000020</td><td>#000080</td><td>#0000ff</td></tr>
<tr><td>#002000</td><td>#008000</td><td>#00ff00</td></tr>
<tr><td>#200000</td><td>#800000</td><td>#ff0000</td></tr>
</table>
<input id="I_COLOR" type="text" value="">
</div>
<script type="text/javascript">
var oTable = document.getElementById('T_COLOR');
var oCell = oTable.getElementsByTagName('td');
for( var i = 0, nb = oCell.length; i <nb; i++){
oCell[i].onmouseover = function(){
document.getElementById('I_COLOR').value = this.innerHTML;
}
}
</script>
</body>
</html> |
|
mardi 28 décembre 2010 à 13:42:03 |
Re : problème avec javascript
siham2010
|
Merci pour ta réponse.
le problème pour moi c'est d'avoir la possibilité d'utiliser le script à plusieurs reprises dont le nombre n'est pas fixe dans le même formulaire.
C-à-d que j'ai besoin d'envoyer l'id de ton tableau "T_COLOR" en tant qu'une variable et non pas l'utilisée dans le script statiquement.
|
|
mardi 28 décembre 2010 à 15:01:10 |
Re : problème avec javascript
PetoleTeam
|
l'exemple que j'ai mis est la pour te montrer, l'appel et l'affectation, on aurait pu faire une fonction plus générique.
Dans ce que tu nous montre ce qui pêche c'est que l'on ne voit pas COMMENT tu appelles la(es) fonction(s) et COMMENT tu affectes la(les) valeur(s).
Dans ta FORM je ne vois nulle part un code du genre onchange="Action();", en gros qui fait quoi et comment.
;O)
|
|
mardi 28 décembre 2010 à 15:41:21 |
Re : problème avec javascript
siham2010
|
Au départ j'ai présenté la partie du script où j'ai besoin d'apeller les variables, néanmoins voici le contenu du fichier "test_js.js" tout en entier.
Merci.
Code Javascript :
function Color(aStr, aHex) {
this.str = aStr;
this.hex = aHex;
}
var columns = 16;
var imgWidth = 6, imgHeight = 6;
var blankColor = new Color('', '');
var namedColors = new Array(
new Color('#000000', '000000'),
new Color('#505050', '505050'),
new Color('#606060', '606060'),
new Color('#707070', '707070'),
new Color('#E0E0E0', 'E0E0E0'),
new Color('#F0F0F0', 'F0F0F0'),
new Color('#FFFFFF', 'FFFFFF'),
new Color('#D00000', 'D00000'),
new Color('#FFFF50', 'FFFF50'),
new Color('#FFFF70', 'FFFF70'),
new Color('#FFFF90', 'FFFF90'),
new Color('#FFFFB0', 'FFFFB0'),
new Color('#FFFFD0', 'FFFFD0'),
new Color('#FFFFF0', 'FFFFF0'),
);
function describe1(aColor) {
if (aColor != blankColor) {
this.document.form3.macouleur.value=aColor.hex;
} else {
self.status = '';
}
}
function describe2(aColor) {
if (aColor != blankColor) {
this.document.form3.secouleur.value=aColor.hex;
} else {
self.status = '';
}
}
function cellOnOver(index) {
describe1(namedColors[index]);
return false;
}
function cellOnClick(index) {
describe2(namedColors[index]);
return false;
}
function printColorTable() {
var counter = 0;
var tdln = counter;
document.writeln('<TABLE id=table2 WIDTH=' + imgWidth*columns + ' bgcolor=#808080><tr><td>');
document.writeln('<TABLE>');
while (counter < namedColors.length) {
if (tdln == 0) { document.writeln('<TR align=center>'); }
document.write('<TD BGCOLOR='+namedColors[counter].str+' WIDTH='+(imgWidth)+'>');
document.write('<A HREF="javascript:void(0)" ');
document.write('onmouseover="return cellOnOver('+counter+')" onClick="return cellOnClick('+counter+')"> ');
document.write('<font size=1 color='+namedColors[counter].str+'> </font>');
document.write('</A>');
document.write('</TD>');
if (tdln == (columns-1)) { document.writeln('</TR>'); tdln=0;}
else tdln++;
counter++;
}
document.writeln('</TABLE>');
document.writeln('</td></tr></TABLE>');
}
printColorTable();
|
|
mardi 28 décembre 2010 à 16:27:57 |
Re : problème avec javascript
PetoleTeam
|
cela reviens à ce que je t'ais présenté
dans une fonction on trouve
Code Javascript : this.document.form3.macouleur.value=aColor.hex; mais pas de trace d'un élément dans ta FORM form3 ayant pour NAME macouleur
il te faut donc écrire
Code HTML : <form id="form" name="form3" action="test.php" method="post" enctype="multipart/form-data">
<label for="couleur_amz">Couleur :</label>
Palette : <input value="000000" name="macouleur" size="6" type="text">
<!-- ne sert à RIEN
<script type="text/javascript">var macouleur="macol";</script>
-->
<script type="text/javascript" src="test_js.js"></script>
</form> et encore un point qui plante ton script
Code Javascript : var namedColors = new Array(
new Color('#FFFFD0', 'FFFFD0'),
new Color('#FFFFF0', 'FFFFF0'), // ICI virgule de fin en trop
); |
|
mardi 28 décembre 2010 à 17:44:51 |
Re : problème avec javascript
siham2010
|
En ce qui concerne la virgule c'est vrai, je l'ai oublié lorsque j'ai réduit le vecteur de couleur pour te l'envoyer.
Alors ce qui concerne le formulaire html j'ai besoin d'appeler la palette de couleur à plusieurs reprises sachant que le nombre de reprises dépendra du choix de l'utilisateur. Le formulaire complet est comme suit:
Code HTML :
<form id="form" name="form3" action="test.php" method="post" enctype="multipart/form-data">
<fieldset id="nom_fr">
<legend>
<input type="checkbox" name="nom_fr" value="nom_fr" id="nom_fr" onclick="document.getElementById('fr').style.display= ''"/>
<label for="checkbox"> Nom Français</label>
</legend>
<br />
<div id="fr" style="display: none">
<label for="police_fr">Police :</label>
<SELECT name=police_fr>
<OPTION value="Arial, Helvetica, sans-serif">Arial, Helvetica, sans-serif
<OPTION value="Times New Roman, Times, serif">Times New Roman, Times, serif
<OPTION value="Courier New, Courier, mono">Courier New, Courier, mono
<OPTION value="Verdana, Arial, Helvetica, sans-serif">Verdana, Arial, Helvetica, sans-serif
<OPTION value="Geneva, Arial, Helvetica, san-serif">Geneva, Arial, Helvetica, san-serif
<OPTION value="Comic Sans MS">Comic Sans MS
<OPTION selected value=aucun>Par défault</OPTION>
</SELECT>
<br /><br />
<label for="taille_fr">Taille de la police :</label>
<SELECT name=taille>
<OPTION selected value=8>8
<OPTION value=10>10
<OPTION value=12>12 </OPTION>
</SELECT>
<br /><br />
<label for="couleur_fr">Couleur :</label>
Palette : <input value="000000" name="macol_fr" size="6" type="text">
Clickez ci-dessous pour sélectionez votre choix : <input value="" name="secol_fr" size="6" type="text">
<script type="text/javascript">
var macouleur="macol_fr", secouleur="secol_fr";
</script>
<script language="JavaScript" src="test_js.js"></script>
</div>
<br /><br />
</fieldset>
<fieldset id="nom_ar">
<legend>
<input type="checkbox" name="nom_ar" value="nom_ar" id="nom_ar" onclick="document.getElementById('ar').style.display= ''"/>
<label for="checkbox_ar"> Nom Arabe</label>
</legend>
<br />
<div id="ar" style="display: none">
<label for="police_ar">Police :</label>
<SELECT name=police_fr>
<OPTION value="Arial, Helvetica, sans-serif">Arial, Helvetica, sans-serif
<OPTION value="Times New Roman, Times, serif">Times New Roman, Times, serif
<OPTION value="Courier New, Courier, mono">Courier New, Courier, mono
<OPTION value="Verdana, Arial, Helvetica, sans-serif">Verdana, Arial, Helvetica, sans-serif
<OPTION value="Geneva, Arial, Helvetica, san-serif">Geneva, Arial, Helvetica, san-serif
<OPTION value="Comic Sans MS">Comic Sans MS
<OPTION selected value=aucun>Par défault</OPTION>
</SELECT>
<br /><br />
<label for="taille_ar">Taille de la police :</label>
<SELECT name=taille>
<OPTION selected value=8>8
<OPTION value=10>10
<OPTION value=12>12 </OPTION>
</SELECT>
<br /><br />
<label for="couleur_ar">Couleur :</label>
Palette : <input value="000000" name="macol_ar" size="6" type="text">
Clickez ci-dessous pour sélectionez votre choix : <input value="" name="secol_ar" size="6" type="text">
<script type="text/javascript">
var macouleur="macol_ar", secouleur="secol_ar";
</script>
<script language="JavaScript" src="test_js.js"></script>
</div>
<br /><br />
</fieldset>
<fieldset id="nom_en">
<legend>
<input type="checkbox" name="nom_en" value="nom_en" id="nom_en" onclick="document.getElementById('en').style.display= ''"/>
<label for="checkbox_en"> Nom Anglais</label>
</legend>
<br />
<div id="ar" style="display: none">
<label for="police_en">Police :</label>
<SELECT name=police_en>
<OPTION value="Arial, Helvetica, sans-serif">Arial, Helvetica, sans-serif
<OPTION value="Times New Roman, Times, serif">Times New Roman, Times, serif
<OPTION value="Courier New, Courier, mono">Courier New, Courier, mono
<OPTION value="Verdana, Arial, Helvetica, sans-serif">Verdana, Arial, Helvetica, sans-serif
<OPTION value="Geneva, Arial, Helvetica, san-serif">Geneva, Arial, Helvetica, san-serif
<OPTION value="Comic Sans MS">Comic Sans MS
<OPTION selected value=aucun>Par défault</OPTION>
</SELECT>
<br /><br />
<label for="taille_en">Taille de la police :</label>
<SELECT name=taille>
<OPTION selected value=8>8
<OPTION value=10>10
<OPTION value=12>12 </OPTION>
</SELECT>
<br /><br />
<label for="couleur_en">Couleur :</label>
Palette : <input value="000000" name="macol_en" size="6" type="text">
Clickez ci-dessous pour sélectionez votre choix : <input value="" name="secol_en" size="6" type="text">
<script type="text/javascript">
var macouleur="macol_en", secouleur="secol_en";
</script>
<script language="JavaScript" src="test_js.js"></script>
</div>
<br /><br />
</fieldset>
</form>
|
|
mercredi 29 décembre 2010 à 10:03:51 |
Re : problème avec javascript
PetoleTeam
|
Réponse acceptée !
Bonjour,
je ne sais comment et quel ordre utiliser, alors je me lance
En un, ajout d'une ID aux champs devant être modifiés
Code HTML : Palette :
<input value="000000" id="macol_en" name="macol_en" size="6" type="text">
Clickez ci-dessous pour sélectionez votre choix :
<input value="" id="secol_en" name="secol_en" size="6" type="text">
ce qui va nous permettre d'y accéder facilement avec un simple document.getElementById('nom_id')
En deux, il faut passer à la fonction principale, à savoir printColorTable() l'ID des champs à modifier pour un appel de la sorte
Code Javascript : printColorTable( "macol_en", "secol_en"); on verra après ou la mettre
Ceci entraîne qu'il faut la modifier pour utiliser ces paramètres
l'entête devient
Code Javascript : //-----------------------------------------
function printColorTable( idmacol, idsecol){
// corps de la fonction
}En trois, maintenant il faut utiliser les paramètres et c'est dans le corps de la fonction que cela ce passe, et notamment sur cette ligne
Code Javascript : document.write('onmouseover="return cellOnOver('+counter+')" onClick="return cellOnClick('+counter+')"> ');
elle devient
Code Javascript : document.write('onmouseover="return cellOnOver(\'' +idmacol +'\',' +counter+')" onclick="return cellOnClick(\'' +idsecol +'\',' +counter+')"> ');comme cela on passe en paramètre idmacol et idsecol aux fonctions appelées sur les événements
Maintenant il faut prendre en compte le passage de ces paramètre aux fonctions appelées, en premier
Code Javascript : //----------------------------
function cellOnOver(id, index){ // ajout du parametre id
describe1( id, namedColors[index]); // transmet le parametre a l'autre fonction
return false;
}et pour la fonction describe1
Code Javascript : //-----------------------------
function describe1( id, aColor){ // ajout du parametre id
if (aColor != blankColor) {
//-- recup element INPUT
var oInput = document.getElementById( id);
//-- affectation valeur
oInput.value = aColor.hex;
} else {
self.status = '';
}
}D'ailleurs pourquoi 2 fonctions et pas une seule ici, cela serait suffisant, mais bon.
En quatre, il faut réorganiser le code
inséres, entre les balises <head> et </head>s ton fichier SCRIPT, dans lequel tu auras pris soin de supprimer l'appel à la fonction printColorTable();
dans le HTML, il te reste à faire l'appel à cette fonction en mettant en paramètres les champs concernés
Code HTML : Palette :
<input type="text" id="macol_en" name="macol_en" size="6" value="000000">
Clickez ci-dessous pour sélectionez votre choix :
<input type="text" id="secol_en" name="secol_en" size="6" value="">
<script type="text/javascript">
printColorTable( 'macol_en' ,'secol_en');
</script> Voilou ceci est à faire pour tous et à tester.
;O)
|
|
Cette discussion est classée dans : problème, code, test, js, macouleur
 Répondre à ce message
 Sujets en rapport avec ce message
Problème débutant.... [ par stanilou ]
Salut,Si je post c'est que j'ai un problème! Alors voilà, moi je veux créé un truc tout simple: Une fonction appelé grâce à un liens....Jusque là pas
Problème fonction [ par stanilou ]
Salut,Je suis vraiment désoler, le premier message que j'ai posté était dans la mauvaise catégorie... Je le remet donc à ça place ici (Le Modo peut su
débutant, utilisation d'un code js [ par tortuedu74 ]
Bonjour, Je code un intranet avec visualStudio 2008.Ne pouvant pas afficher de msgBox, j'ai opté pour le javascript (dont je ne connais rien... ).voic
Problème avec un manège 3D Javascript. [ par romainroffi ]
Bonjour tout le monde. Je suis en train de faire un site j'ai mis un manège 3D dans ma page. Ce manège 3D je l'ai trouvé sur ce site: [url=http
recuperer valeur d'un input un peu special... [ par deathsurfer ]
Bonjour a tous! Une page aspx genere une page html qui contient cette chaine la: [code=js] 01/Aug/2009 ( 3 days left) 08/Aug/2009 (
Problème de positionnement d'une vidéo dans une page [ par Papapetch ]
Bonjour Je ne sais pas si ce forum est bien choisi pour ce sujet mais voilà le problème qui me coince. J'ai intégré une video flv dans une page par c
Problème avec un lien javascript [ par matdev62 ]
J'ai créé un bouton à l'aide de javascript. Celui fonctionne correctement sous IE mais pas sous FF. Voici le code [code] echo"getBaseUrl()."/".$ress
Ridicule problème : boucle for [ par RealSociopath ]
Bonjour à tous ! Je vous présente un problème certainement risible pour vous mais qui est pour moi insolvable avec mes débuts de connaissance en js.
Problème de test d'un input text dynamique avec js [ par alaska749 ]
Bonsoir, J'ai un problème avec le test d'un input text dynamique. En effet, dans le code ci-joint l'utilisateur peut à son grée ajouter ou pas des élé
problème avec le boutton close d'un Panel [ par wagdifr ]
Bonjour , voici mon code : [code=js] com = new YAHOO.widget.Panel("test", { fixedcenter:true,
 Livres en rapport
|
Derniers Blogs
 POUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDNPOUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDN par neodante
Quelle est le point commun entre : Microsoft il y a 10 ans et Apple aujourd'hui ? Réponse: avoir une politique de protocoles propriétaires et fermés :) Car pour rappel (si si je vous assure c'est important de le rappeler), la majorité des spécifications e...
Cliquez pour lire la suite de l'article par neodante JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|