Discussion :

[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?...

[SpaceFrog]

ben mets lui une valeur

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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"

[SpaceFrog]

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

tu lui mets ou la valeur ?

montre nous du code ...

[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

[yurispy]

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.

[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é...

[Watilin]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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
}

[yurispy]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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.

[yurispy]

La ligne correspond bien à for (var i=0; i<NPK.length; i++)

Si comme sur ton code je fais un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ReferenceError: chaine is not defined

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$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.

[SpaceFrog]

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

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.

[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.

[SpaceFrog]

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

mais que je n'avais pas de value=

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

[yurispy]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[yurispy]

Bonjour

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Watilin]

Salut,
comment ça va depuis l'année dernière ?

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

/[\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 :

Sélectionner tout - Visualiser dans une fenêtre à part

/[\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.

[yurispy]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ^^