Bonsoir W.ided123,
la règle sur le forum JavaScript c'est de ne pas poster le code serveur : ça ne nous intéresse pas. Mais bon, là on comprend ce que c'est censé générer, donc ça va.
La première info qu'il te manque, c'est qu'on ne peut pas faire appel à du JavaScript directement dans l'attribut value d'un input. Il faut que tu fasses les choses en 2 temps. D'abord tu génères le code HTML+JavaScript sur ton serveur ; ensuite le code HTML arrive sur le poste client, et là le code JavaScript s'exécute.
Seconde info, tu te compliques la vie avec les id. D'abord parce qu'un id doit être unique dans la page. S'il y en a plusieurs fois le même, il n'y a aucune garantie que ton script se comporte correctement. Ensuite parce que tu n'as pas besoin d'id. En fait, ton script ne peut agir que s'il a une donnée physique à lire. Et cette donnée physique est remplie par l'utilisateur. Il faut donc attendre une action de l'utilisateur (un évènement clavier dans l'input qui va bien) pour lancer le script.
Pour surveiller les évènements clavier, tu as plusieurs stratégies :
- ajouter un attribut onkeyup à chacun des champs « qte_physique », directement dans le code HTML. Mais ce n'est pas élégant, ça alourdit le code HTML et ça éparpille le code JS : mauvais pour la maintenance.
- utiliser addEventListener autant de fois qu'il y a de champs : c'est déjà mieux, mais pas optimal, on peut faire encore mieux.
- Utiliser une seule fois addEventListener sur le tableau entier, et regarder l'élément qui a émis l'évènement clavier. Ça s'appelle faire de la délégation d'évènement et c'est pas franchement compliqué.
Pour rendre la sélection des champs de saisie à la fois plus pratique et plus efficace, ajoutons des classes dessus :
<input type="text" size="4" class="qte_physique" />
(Note : je te donne tous ces bouts de code en HTML mais évidemment il faudra que tu les adaptes dans ton code PHP.)
Tu noteras que j'ai retiré l'attribut name : puisque tu n'as pas de formulaire dans la page, il ne sert à rien. À propos, c'est un champ pour saisir des nombres, non ? Passons-le en type number :
<input type="number" min="0" max="99" step="1" class="qte_physique" />
L'autre champ, celui qui doit recevoir le résultat, n'est pas censé être modifié par l'utilisateur. Ajoutons-lui l'attribut readonly :
<input type="text" readonly="readonly" size="4" class="ecart" />
Je lui ai également retiré son name.
Pour faire ton calcul tu as également besoin de la quantité théorique, mais d'après ton code HTML cette valeur se trouve directement dans un <td> et pas dans un <input>. Pas de problème, on n'a qu'à ajouter une classe sur le <td> :
<td class="qte_theorique">
Le seul détail c'est qu'on utilisera .textContent au lieu de .value.
Certains développeurs web sont partisans de mettre les balises <script> tout en bas du <body>. On va faire comme ça pour simplifier un peu. Sinon il faut utiliser un autre gestionnaire d'évènement pour être sûr que le DOM est prêt quand le script commence.
Au fait, tu connais la fonction document.querySelector ? Elle est vraiment magique ! Elle te permet d'utiliser des sélecteurs comme en CSS pour atteindre un élément de la page.
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
26
| // on commence par obtenir une référence sur le tableau
var tableau = document.querySelector("table");
// et là on fait notre délégation d'évènement
tableau.addEventListener("keyup", function( event ){
// on examine la cible de l'évènement
var cible = event.target;
if (cible.className === "qte_physique") { // bingo
// à présent il faut chercher le champ à remplir dans la même ligne du tableau
// on commence par remonter jusqu'au <tr>
var parent = cible;
do {
parent = parent.parentNode;
} while (parent.tagName !== "TR");
// et on utilise la fonction magique
var ecart = parent.querySelector(".ecart");
var qte_theorique = parent.querySelector(".qte_theorique");
// il n'y a plus qu'à calculer
// on utilise parseInt pour s'assurer que les chaînes sont correctement converties en nombres
// le 10 signifie qu'on veut les résultats en base décimale
ecart.value = parseInt(qte_theorique.textContent, 10) - parseInt(cible.value, 10);
}
}); |
Fonction Calcul dans la même page html
Répondre avec citation
Envoyé par W.ided123
Pas de question technique par MP !
Partager