RegExp et boucle for

Version imprimable

Voir 40 message(s) de cette discussion en une page

25/10/2013, 10h39
yurispy

Effectivement je pense m’être mélanger entre les ID des inputs et les ID des élément tel que div etc.. j'ai pas fait attention.

Mais je pense avoir trouvé le problème... ou alors j'ai rien compris au javascript

Si j'enregistre la page et que je l'ouvre je peux voir que
<input name="N0" type="text" size="10" id="N0">il y a pas de value="19,5" donc forcément je peux toujours essayé de prendre la valeur si elle existe pas...
Chose étrange que je ne comprends pas.
newinput.id=NPK[i]; me retourne id="19,5"newinput.value=NPK[i]; me retourne rien

Cela ne viendrait il pas de la?
Comment puis prendre la valeur de l'élément id NO si j'ai pas de valeur?...
25/10/2013, 10h48
SpaceFrog

ben mets lui une valeur :roll:
25/10/2013, 11h56
yurispy

raaahhh mais il est pas sensé l'avoir avec NPK[i]?

la valeur je l'ai bien de l'array je pige rien sérieux..
Je reprends au début...
Le code qui découpe 19,5-22-88Euralis en 3 input avec les paramètres
name, type, value, id, size,onkeyup

Ce code me génère 3 input qui sont:

Code:

<div id="NPK_id"><input name="N0" type="text" size="10" id="19,5"><input name="N1" type="text" size="10" id="22"><input name="N2" type="text" size="10" id="88"></div>

On voit bien que:
name est comme le dit le code N1
type text
size 10
id 19,5
et pas de value alors qu'il est spécifié a la création... et ayant la même variable que id il devrait avoir la bonne valeur sauf que la rien...
je devrais il me semble avoir value="19,5"
25/10/2013, 11h59
SpaceFrog

Citation:

raaahhh mais il est pas sensé l'avoir avec NPK[i]?

tu lui mets ou la valeur ?

montre nous du code ...
25/10/2013, 14h31
yurispy

j'ai trouvé... le code c'est celui de ton post numéro 10
il faillait écrire newinput.setAttribute("value", NPK[i]) au lieu
de newinput.value=NPK[i]; comme tu avais mis.

j'ai donc désormais bien les inputs avec leur valeur...
j'avance j'avance...
je m’aperçois d'une chose...
quand on a du javascript qui génère des input comme dans mon cas
si on regarde le code source de la page généré il apparaisse pas. Malgré cela on y accède?

J'en reviens au problème précédent entre le code qui me fait mais 3 input
et celui qui les traites pour faire un calcul... je perds la valeur.

Désolais de pas mettre de code mais des que je mets du code aujourd'hui j'ai une erreur du navigateur. Si tu veux voila le lien de ma page
tu y trouveras les script dans les sources etc..

http://yurispy.synology.me/cultureV2...nt_engrais.php
25/10/2013, 17h25
yurispy

1 pièce(s) jointe(s)

Bon dans ma page j'ai gardé que les éléments dont j'ai besoin pour réussir. L'essentiel pour arrivé a ce que cela marche...

Je l'ai mis en pièce jointe car ici il en veut pas.
Peut être qu'une vue d'ensemble te permettra de mieux comprendre.
26/10/2013, 16h27
yurispy

Probleme résolu
le bug venait de la , uniquement
j'ai rajouté ceci
chaine=chaine.replace(',','.');
et désormais cela marche parfaitement
merci SpaceFrog de ta patience...

maintenant je m'attaque au menu select qui va envoyé la donné...

Citation:

Envoyé par yurispy

quand on a du javascript qui génère des input comme dans mon cas
si on regarde le code source de la page généré il apparaisse pas. Malgré cela on y accède?

En fait quand on regarde le code source, on voit le code de la page dans son état inital. Les modifications dynamiques n'y apparaissent pas. En revanche, ta console a normalement un inspecteur HTML (avec une commande qui s'appelle « examiner l'élément » ou quelque chose dans ce genre) avec lequel tu peux voir les input générés.

Effectivement la virgule posait problème car en JavaScript c'est le point qui sépare la partie décimale de la partie entière des nombres. J'attire ton attention sur la fonction parseFloat qui est un peu plus laxiste que le constructeur Number :
Code:

1 2 Number("19.5a"); // NaN parseFloat("19.5a"); // 19.5
Ça peut aider par exemple si l'utilisateur a appuyé sur une touche de son clavier sans faire exprès.

En lisant la conversation je me suis permis d'écrire ma propre version du code pour générer les input, tu y trouveras peut-être des éléments intéressants.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var chaine = "19,5-20-88Euralis"; var $NPK_id = document.getElementById("NPK_id"); var match = chaine.match(/[\d,]+/g); if (match) { match.forEach(function( NPKi, i ){ var $input = document.createElement("input"); $input.type = "text"; $input.name = "N" + i; $input.value = NPKi.replace(/,/g, "."); $input.onkeyup = Calculer; $NPK_id.appendChild($input); }); } else { // afficher un message d'erreur expliquant que la chaîne n'a pas le bon format }

merci Watilin.
Voici mon code mis a jours pour que cela marche presque parfaitement....
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function NPK_reg() { //var chaine="19,5-20-88Euralis"; //var chaine=document.getElementById('texteTEST').value; var chaine=document.getElementById('id_engrais').options[document.getElementById('id_engrais').selectedIndex].text; //chaine=chaine.replace(/[^\d,-]+/g,''); chaine=chaine.replace(/,/g,'.'); var reg=/(\d+\.?\d+?)-(\d+\.?\d+?)-(\d+\.?\d+?).*/g; var NPK = reg.exec(chaine); for (var i=0; i<NPK.length; i++) { var newinput= document.createElement('input'); newinput.setAttribute("size", "5"); newinput.setAttribute('onkeyup', 'Calculer()'); newinput.setAttribute('onload', 'Calculer()'); newinput.setAttribute("name", "N"+i); newinput.setAttribute("type", "text"); newinput.setAttribute("value", NPK[i]); newinput.setAttribute("id", "N"+i); document.getElementById('NPK_id').appendChild(newinput) } }
Voila ma dernière version
je vais testé la tienne aussi.
Pour parseFloat c'est pas mal effectivement cela peut aider,merci.
J'ai découvert la console c'est tres pratique.
J'ai commencé a faire que un menu select avec mes différents nom envoie ma variable et y appliqué ma fonction mais ça marche pas encore...
pour cela j'ai

Code:

<select data-placeholder="Choisir l'engrais" class="chosen-select" style="width:270px;" tabindex="3" name="id_engrais" id="id_engrais" onChange="NPK_reg();">

dans la console je teste j'ai ma valeur qui est retourné si je la mets
document.getElementById('id_engrais').options[document.getElementById('id_engrais').selectedIndex].text
"19-0-33 EURALIS -7321"

mais avec le menu cela me sort ceci
Uncaught TypeError: Cannot read property 'length' of null
comme si la valeur n'entrer pas dans la fonction NPK_reg

J'ai testé ton code Watilin et il est pas mal mais dans les inputs que tu créais il ne créait pas valeur= donc pour ma fonction Calculer() cela marche pas hélas.

par contre avec ton code, et la ligne

Code:

var chaine=document.getElementById('id_engrais').options[document.getElementById('id_engrais').selectedIndex].text;

cela marche .... j'ai du mal a comprends c'est différence de fonctionnement.

28/10/2013, 15h46
Watilin

Regarde bien. Ton message d'erreur parle d'une propriété length à laquelle tu essayes d'accéder, sur un objet qui se trouve être null. Dans le code que tu nous as donné, il n'y a qu'un seul endroit où on trouve length : à la ligne for (var i=0; i<NPK.length; i++). Mais ça me paraît bizarre, ça voudrait dire que le motif ne correspond pas à la chaîne. Normalement tu as un numéro de ligne dans le message d'erreur, vérifie que ça correspond.
28/10/2013, 19h47
yurispy
La ligne correspond bien à for (var i=0; i<NPK.length; i++)

Si comme sur ton code je fais un
Code:

1 2 3 4 if (NPK) { }else{ alert(); }
J'ai mon alerte donc j'en conclu qu'il est vide.
Dans la page j'ai choisi sur mon menu select une option
dans la console je tape

Code:

document.getElementById('id_engrais').options[document.getElementById('id_engrais').selectedIndex].text;

il me retourne bien "19-0-33 EURALIS -7321"
dans la console je tape chaine
il me retourne rien

Citation:

ReferenceError: chaine is not defined

Comment est ce possible alors que la première ligne du script c'est

Code:

var chaine = document.getElementById('id_engrais').options[document.getElementById('id_engrais').selectedIndex].text;
28/10/2013, 20h20
Watilin
Parce que chaine est une variable locale à la fonction NPK_reg. Tu connais la différence entre une variable locale et une globale, n'est-ce pas ? Le mot-clé var est important à comprendre, il y a de nombreux guides dessus sur Développez.com.

Tu peux utiliser la console pour faire du débogage pas-à-pas. Le moyen le plus simple est de placer le mot-clé debugger à l'endroit voulu dans ton script. Si la console est ouverte, elle le détectera et passera en mode débogage automatiquement.

À mon avis, tu devrais utiliser match plutôt que exec. exec se comporte d'une façon particulière avec le flag g. Tiens, pourquoi tu n'en ferais pas l'expérience par toi-même ? Tape ceci dans ta console :
Code:

1 2 var reg = /./g; var str = "abc";
Puis exécute plusieurs fois reg.exec(str);, tu verras que le résultat change à chaque fois.
28/10/2013, 21h35
yurispy

oui j'y ai pensé au global avec var etc.. comme sous php
mais cela ne change rien.
J'ai testé exec a il fait 4 itération différente. a b c null

J'ai finalement utilisé ton code qui était plus "simple"
j'ai juste du modifié cette ligne

Code:

$input.value = NPKi.replace(/,/g, ".");

par

Code:

$input.setAttribute("value", NPKi.replace(/,/g, "."));

pour que cela marche.

Maintenant je m'aperçois que créer un input est une mauvaise idée vu que à chaque option sélectionnée dans le menu, il en créait 3 nouveau de plus.
Je pense qu'il faudrait mieux mettre à jours 3 input.
29/10/2013, 07h59
SpaceFrog

Citation:

il faillait écrire newinput.setAttribute("value", NPK[i]) au lieu
de newinput.value=NPK[i]; comme tu avais mis.

:roll:
Tu viens de décider ça ? 15 ans que ke mets .value sans souci et toi tu débarques du haut de tes 15 jours de javascript ...

Le tout est de correctement syntaxer son code html en amont ...
c'est sur qu'avec un code html bancale il est difficile de manipuler correctement ses objets avec javascript.
29/10/2013, 10h07
yurispy

J'ai rien décidé du tout. Je ne connais pas la "syntaxe" actuel que l'on doit appliqué pour avoir un code javascript universellement fonctionnel.

J'ai simplement constaté que dans chrome ET firefox le code marché effectivement mais que je n'avais pas de value= et par conséquent mon second code ne fonctionné pas.

Mais si je le marque de la manière dont je le fais cela fonctionne parfaitement.
J'ai pas du tout la prétention d'expliqué quoi que ce soit. Je suis sur le forum pour apprendre et c'est le cas. Je ne connaissais pas la console désormais cela m'est très utile.
J'essai de trouvé seul et comprendre. Et j'écoute la preuve j'ai utilisé match() au lieu exec mais tu vas dire j'ai fait que pompé le code. Le miens précédemment avec mon regex marché aussi mais plus compliqué...

Apres si tu as un tuto qui explique pourquoi il faut mieux cette manière plutôt que l'autre.. je le lirais.
29/10/2013, 10h29
SpaceFrog

Peut être faut il se poser les bonne questions ...

Citation:

mais que je n'avais pas de value=

Citation:

Le tout est de correctement syntaxer son code html en amont ...

C'est le script qui créer l'input
il a la ligne avec l'argument pour le créer
et c'est également lui qui y met la valeur a lui attribuer.
Croit moi je suis pas bouché. Je comprends simplement pas, soit mon code, soit ce que tu essaie de m'expliqué.
Moi si je reprends la code. Je comprends ceci
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var chaine = "19,5-20-88Euralis"; // Il prend une valeur ( maintenant elle est dynamique provenant d'un menu select ) var $NPK_id = document.getElementById("NPK_id"); // Je déclare une variable pour la suite var match = chaine.match(/[\d,]+/g); // Je coupe ma chaine avec les nombre avec décimal si elle existe if (match) { // Si j'ai match je continue match.forEach(function( NPKi, i ){ //On parcourt le tableau match var $input = document.createElement("input"); // On déclare la variable et on dit qu'on créait un nouvelle élément de type input $input.type = "text"; // On y ajoute un attribut type text $input.name = "N" + i; // On y ajoute un attribut name qui aura pour nom N suivi du numéro de l'array $input.value = NPKi.replace(/,/g, "."); // On y ajoute un attribut value qui aura pour valeur la valeur de la case array et on y remplace la , par le . $input.onkeyup = Calculer; // On ajoute l'attribut onkeyup $NPK_id.appendChild($input); // On place l'ensemble précédemment déclarer dans le noeud enfant précédemment déclarer. }); } else { // afficher un message d'erreur expliquant que la chaîne n'a pas le bon format }
Donc pour moi c'est bien ce script qui va créer l'input inexistant
composé de type, name, value, onkeyup
Moi si je copie colle tel que dans ma page j'ai donc bien 3 input créer remplie avec la bonne valeur et quand j'appelle celle ci dans le 2nd script cela marche pas... par contre si je mets l'autre manière d'écrire

Code:

$input.value = NPKi.replace(/,/g, ".");

Visuellement cela change rien mais ça marche...

Apres je débute, tu as une vision juste, précise, de voir la chose.
Moi je t'explique en tant que néophyte ce que je peux observé en comportement.

Bref de toute manière j'ai fini et tout marche parfaitement. J'ai plus cas le mettre au propre.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function NPK_reg() { var chaine; var chaine = document.getElementById('id_engrais').options[document.getElementById('id_engrais').selectedIndex].text; var $NPK_id = document.getElementById("NPK_id"); var match = chaine.match(/[\d,]+/g); if (match) { match.forEach(function( NPKi, i ){ document.getElementById("N" + i).value = NPKi.replace(/,/g, "."); }); } else { alert('Erreur NPK'); } }
Et je vous remercie tout deux pour votre aide et patience

Bonjour

Je reviens avec un petit souci supplémentaire.
Voici mon code actuel qui fait pratiquement ce que je souhaite
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function NPK_reg() { var chaine; var chaine = document.getElementById('id_engrais').options[document.getElementById('id_engrais').selectedIndex].text; var $NPK_id = document.getElementById("NPK_id"); var match = chaine.match(/[\d,]+/g); if (match) { match.forEach(function( NPKi, i ){ document.getElementById("N" + i).value = NPKi.replace(/,/g, "."); }); } else { alert('Erreur NPK'); } }
Je lui envoie ceci:
10-20-30 produit 16800
33,5-10-00 produit 5000
18-42-10 produit 350
Orge SRA 6000
14,5-22-22,5 SQM 10800
etc...

Actuellement le code match tout les nom.
Cela me sort donc
match 1 10 match 2 20 match 3 30 match 4 16800
La j'ai pas de souci vu que je prends que les 3 premiers
mais avec Orge SRA il va match 6000 et il faut pas car cela corresponds a une quantité de produit en stock.
Comment faire pour que ça ne marche que pour les nom:
10-20-30 produit 16800
33,5-10-00 produit 5000
18-42-10 produit 350
14,5-22-22,5 SQM 10800

Moi je n'ai vraiment besoin que de 10-20-30 33,5-10-00 18-42-10 14,5-22-22,5

12/11/2014, 19h13
Watilin
Salut,
comment ça va depuis l'année dernière ? :D

On peut partir sur plusieurs approches.

Celle qui demande le moins de modification de ton code, je crois que c'est celle-ci :
j'ai constaté que les quantités que tu ne veux pas matcher se trouvent à la fin de la ligne. J'ai donc rajouté à la regexp un lookahead, (litt. « regarder en avant ») c'est une sorte de groupe qui regarde ce qu'il y a après mais sans faire avancer le curseur. Dans mon lookahead, je demande à ce qu'il y ait un caractère, n'importe lequel, après la correspondance.

Code:

/[\d,]+(?=.)/g

Si on teste "10-20-30 produit 16800".match(/[\d,]+(?=.)/g) on obtient : [ "10", "20", "30", "1680" ]. C'est pas tout à fait ce qu'on veut.

C'est là qu'intervient le marqueur magique \b, la « limite de mot » (word boundary), qui marche avec les lettres et les chiffres (en fait, tout ce qui rentre dans le groupe \w). Il a une longueur 0 comme les ancres ^ et $ et il matche quand on se trouve entre un \w et un non \w.

Code:

/[\d,]+(?=\b.)/g

Re-testons : "10-20-30 produit 16800".match(/[\d,]+(?=\b.)/g) => [ "10", "20", "30" ]. C'est bien.
Second test : "Orge SRA 6000".match(/[\d,]+(?=\b.)/g) => null Ça marche !

Parmi mes autres approches dans ma tête il y avait :
- utiliser deux regexp : matcher d'abord /^[\d,-]+/g puis décomposer avec ta regexp actuelle
- linéariser la regexp : /([\d,]+)-([\d,]+)-([\d,]+)/ et utiliser exec à la place de match
Choisis la solution que tu préfères ;)

Edit : Si tu es à l'aise en anglais, voici un peu de lecture sur les lookaheads et le \b.

Bon j'ai réussi avec ta dernière solution

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
function NPK_reg()
{
	var chaine;
	var chaine = document.getElementById('id_engrais').options[document.getElementById('id_engrais').selectedIndex].text;
	var $NPK_id = document.getElementById("NPK_id");
 
 
 	var match = chaine.match(/([\d,]+)-([\d,]+)-([\d,]+)/);
 
	if ( match && match!==null ) {
 
		match.forEach(function( NPKi, i ){
			document.getElementById("N" + i).value = NPKi.replace(/,/g, ".");
		});
 
	} else {
 
	document.getElementById("N1").value = "0";
	document.getElementById("N2").value = "0";
	document.getElementById("N3").value = "0";
 
	}
 
}

Je te remercie ^^

Voir 40 message(s) de cette discussion en une page