[Résolu] Définition variable dans boucle javascript

Bonjour,

Cette discussion fait suite à cette discussion résolue.

Le codepen montre le problème.

Par rapport à discussion résolue j'ai deux formulaires et je passe par une boucle.
Disons que je suis forcé de faire une boucle, ne pas proposer une solution sans boucle.

Le problème est l'input text :
name="prec[711][F]" id="F711"
et son jumeau
name="prec[892][F]" id="F892"

Vous constatez que si j'agis sur 711 le text F711 est bien rempli mais F892 prend la même valeur alors qu'il devrait rester vide.
Et réciproquement si j'agis sur 892 le text F892 est bien rempli mais F711 prend la même valeur alors qu'il devrait rester vide.

Si vous pouviez me dire ce qui cloche dans la boucle je serais une fois de plus très reconnaissant.
Modifié par boteha_2 (27 Sep 2020 - 19:33)

Et l'eau,

Tu devrais présenter ton code sur une seule et unique ligne. Ensuite, quand je lis ce genre de choses (const testca = document.getElementById('ocp');), ça va être simple pour comprendre....
Modifié par niuxe (28 Sep 2020 - 02:14)

Bonjour,

Ta réponse ne m'aide pas trop.

Ce code est une version simplifiée d'un code ou l'on commence par compter le nombre de formulaires dans la page, d'où const testca = document.getElementById('ocp');) qui peut paraître inutile mais est utile dans un contexte plus large.

Bonjour.
En ajoutant 2 lignes en fin de fichier , ca devrait fonctionner.

const testca = document.getElementById('ocp');

if (testca)
{
    var textca = testca.textContent;
    textca = textca.slice (textca.indexOf ('TLC') + 4, -1);
    tab_ca_id = textca.split (' + ');
    for (let i = 0; i < tab_ca_id.length; i++)
        {bind_event(i);}
}


function bind_event(i)
{
    var idPreco = document.getElementById ('F'+ tab_ca_id[i]);
    var tex = document.querySelectorAll ('table.compcab input[type=text]');
    for (let j = 0; j < tex.length; j++)
    {	
        tex[j].addEventListener('click', function ()
            {
                var Radio = this.parentNode.parentNode.querySelector('input[type=radio]');
                var idImg = Radio.id.split ('--');
                idPreco.value=idImg[2];
                document.getElementById(Radio.id).checked=true;
            }
        );
    }

    if (tex.length > 0)
    {
        const rad = document.getElementsByName ('super');
        for (let j = 0; j < rad.length; j++)
        {	
            rad[j].addEventListener('click', function()
                {
                    var idRadio = 'U'+this.value;
                    var idImg = this.id.split ('--');
                    document.getElementById (idRadio).focus();
                    //idPreco.value= idImg[2];
                    
                    // 2 lignes ci-dessous à ajouter
                    let r=document.getElementById('F'+idImg[1]);
                    r.value=idImg[2];
                }
            );
        }
    }
}

Bonjour Alain_47,

Merci de ton aide.

Je ne comprends pas bien le sens de ta correction (je vais y réfléchir...) mais de fait cela fonctionne.

A condition il semble de faire de même dans la boucle qui check le radio quand focus sur text.

Voir mise à jour du codepen.

Petit complément, il faudrait que toute action sur un formulaire efface les input du nombre de fibres des autres formulaires.
J'ai l'impression qu'il faut reprendre le tableau tab_ca_id et faire une boucle pour effacer tous les id=F+val si val != formulaire actif.

je m'y attaque au plus tôt.
Modifié par boteha_2 (28 Sep 2020 - 22:14)

boteha_2 a écrit :
Bonjour,Ta réponse ne m'aide pas trop..

pourquetucomprenneslàoùjeveuxenvenirestquetoncodeestdiificilementlisibleenpluschangerlenomdevariableparuneautregenreocppartestapuistescaçaveutriendireencorejaipastoutluilmadonnémalalatêtequandtuviensdetecréerunelibrairieoutuasréfléchitetquetuvoisuncodecommeçadésoléçadonnepasenvieuncodeçaseprésenteçapermetdelireunehistoirequiteracontecequelenavigateurfaitenloccurence. (tu vois c'est chiant à lire)

Donc, oui ce que je t'ai dit plus haut (message précédent) t'aide ! Surtout le lien que j'ai mis en exergue.... à lire et à relire. Le but de venir ici est que tu progresses et pas seulement sur ton souci mais d'une manière générale.

Aussi, quand tu reliras les règles du forum, il est préférable d'être précis et explicite dans ton sujet. Plus tu le seras, plus tu auras des chances d'avoir une réponse efficace adaptée à ton souci. C'est dommage. Tu t'es donné la peine de nous joindre un code à ton souci. Cela dit, ça a été fait maladroitement.
Modifié par niuxe (28 Sep 2020 - 23:46)

boteha_2 a écrit :

Petit complément, il faudrait que toute action sur un formulaire efface les input du nombre de fibres des autres formulaires.
J'ai l'impression qu'il faut reprendre le tableau tab_ca_id et faire une boucle pour effacer tous les id=F+val si val != formulaire actif.

form.reset()

Merci de tes réponses.

Je vais regarder form.reset () et compléter le codepen dès que j'ai le temps.

Bonjour,

Avant tout, je suis d'accord avec Niuxe : si tu cherches une aide, la moindre des choses est de nous donner un code lisible. Il me semble que tu as deja recu cette remarque par Otara dans une precedente discussion.

Pour ma reponse, c est tres simple. le resultat que tu voulais afficher se trouvait dans ton code HTML input. il suffit de regarder l'ID de l'element voulu (dans ton cas id="F711" et id="F892".

<p class="at">
    <input type="hidden" name="prec[711][at]" value="JO" />
    Je demande une preconnectorisation sur 
        <input type="text" size="2" name="prec[711][F]" id="F711" /> 
    fibres <b>(obligatoire pour ce cable)</b>
</p>

et

<p class="at">
    <input type="hidden" name="prec[892][at]" value="JO" />
    Je demande une pr&eacute;connectorisation sur 
        <input type="text" size="2" name="prec[892][F]" id="F892" /> 
    fibres <b>(obligatoire pour ce câble)</b>
</p>

ensuite j'ai mis des console.log() sur plusieurs elements du code JS pour savoir dans ton code où tu trouves ces infos : et j'ai trouvé idImg[1] qui donne soit 711 soit 892, en fonction de l'input radio selectionné.
Ca fonctionne en fonction de ton code, je n'ai pas dit que c'etait le meilleur code possible

Bonjour Alain_47 et Niuxe,

C'est toujours difficile de rentrer dans le code d'un autre, surtout mal présenté, et je vous remercie de l'avoir fait.

Cela dit, quelque chose que je comprends pas :

Mon code d'origine

var idPreco = document.getElementById ('F'+ tab_ca_id[i]);
puis...
idPreco.value=idImg[2]

// Remplit tous les input nombre de fibres
;

Correction Alain_47

let r=document.getElementById('F'+idImg[1]);
r.value=idImg[2]

// Ne remplit que l' input du form actif.
;

Je ne vois pas trop où est la différence de code.
Seul le résultat compte mais si je pouvais comprendre.
Modifié par boteha_2 (29 Sep 2020 - 21:56)

Hello,

Dans ce code, regarde bien le détail:

var idPreco = document.getElementById ('F'+ tab_ca_id[i]);
// -->  ('F'+ tab_ca_id[i]) --> ici le i, c'est à dire que cette valeur change à chaque tour de FOR !
;

Alors que là:

let r=document.getElementById('F'+idImg[1]);
// -->  ('F'+idImg[1]) --> ici le 1, valeur fixe à chaque tour de FOR [cligne]
;

Bonjoçur stryk,

Compris, merci.

Bonjour,
Depuis la dernière fois, j ai pensé faire une petite variante.
On peut se servir de 'event' avec "addEventListener" pour avoir l'id de l'input 'radio' dans la 2eme partie de la fonction.

const testca = document.getElementById('ocp');
    // html = <p id="ocp">Comparaison produits (réf. TLC 711 + 892)</p>
if (testca)
{
    let textca = testca.textContent; 
        // textca = Comparaison produits (réf. TLC 711 + 892)
    textca = textca.slice (textca.indexOf('TLC') + 4, -1);
        // textca.indexOf('TLC') = 27
        // 27 + 4 = 31
        // textca = textca.slice(31,-1) = "711 + 892"
    tab_ca_id = textca.split (' + ');
        // tab_ca_id[0]=711 ; tab_ca_id[1]=892
        // tab_ca_id.length = 2
    let idPreco = []; 
    for (let i = 0; i < tab_ca_id.length; i++)
        {
            idPreco[i] = document.getElementById('F'+ tab_ca_id[i]);
            // correspondent à l'ID des 2 inputText à l'exterieur des 'table'
            // pour la preconnisation de connexion (12 ou 24)
        }
    bind_event(idPreco);
}


function bind_event(idPreco)
{   
    let inputText = document.querySelectorAll ('table.compcab input[type=text]');
        // inputText.length = 4 (les 4 inputText dans les 'table')
    for (let j = 0; j < inputText.length; j++)
    {	
        // ici on veut que lorsqu'on clique sur l'inputText d'une ligne,
        // l'inputRadio de la meme ligne soit selectionné 
        inputText[j].addEventListener('click', function()
        {
            let inputRadio = this.parentNode.parentNode.querySelector('input[type=radio]');
                // inputRadio.id = AFCS-PEHD-OS2-12--711--12 (si click sur 1er InputText)
            let idImg = inputRadio.id.split ('--');
                // idImg[0] = AFCS-PEHD-OS2-12 (si click sur 1er inputText)
                // idImg[1] = 711              (idem)
                // idImg[2] = 12               (idem)
            document.getElementById(inputRadio.id).checked=true;
                // ca y est, le inputRadio est selectionné.
                
            // mais en plus, il faut afficher 12 ou 24 dans le 'inputText' de preconisation
            let a;
            if(idImg[1]==tab_ca_id[0]){a = 0;} else {a = 1;}
            idPreco[a].value=idImg[2];
        });
    }

    if (inputText.length > 0)
    {
        inputRadio = document.getElementsByName ('super'); // 4 input 'radio'
        for (let j = 0; j < inputRadio.length; j++) // j-> 0 à 3 
        {	
            inputRadio[j].addEventListener('click', function(e)
            {
                idRadio = e.target.id;
                let idImg = this.id.split ('--');
                let idPreco=document.getElementById('F'+idImg[1]);
                idPreco.value=idImg[2];
            });
        }
    }
}

Bonjour alain_47,

Merci de ta suggestion.

Je teste ce soir.

Je vous tiens informés.

En fait ici, on n'a pas besoin de l'event pour recuperer l'id puisqu'on peut l'avoir avec le this.

if (inputText.length > 0)
    {
        inputRadio = document.getElementsByName ('super'); // 4 input 'radio'
        for (let j = 0; j < inputRadio.length; j++) 
        {	
            inputRadio[j].addEventListener('click', function()
            {
                let idImg = this.id.split ('--');
                let idPreco=document.getElementById('F'+idImg[1]);
                idPreco.value=idImg[2];
            });
        }
    }

Bonjour Alain_47,

J'ai chargé ton code sur le codepen.

Il n'efface pas le nombre de fibres du formulaire éventuellement déjà rempli mais c'est un détail que je peux résoudre tout seul, du moins j'espère.

Si je comprends l'intérêt par rapport au code précédent est : tu fais la boucle principale sur les idPreco ce qui évite d'avoir à les recalculer dans les deux boucles secondaires.

Est-ce l'unique avantage ou y en a-t-il d'autres que je n'ai pas vus.

Bonsoir,
- Un programme peut s'ecrire de plusieurs facons (differentes variantes). J'ai juste voulu essayer une petite variante.
- pour les données à effacer, tu l'as très bien fait dans ton code pen.

NB : les commentaires que j'ai mis proviennent des console.log( ) - très utiles.
Modifié par alain_47 (05 Oct 2020 - 00:08)

Bonjour Alain_47,

Merci pour ton code.

Je vais revenir à la version précédente mais pour des raisons que tu ne pouvais pas connaître.

La principale : en production le champ F+ca_id (idpreco) peut ne pas exister.
Il faut faire la boucle sur ce qui existe (ca_id), pas sur F+ca_id qui peut exister ou pas.

Mais tu m'as donné la solution du problème, encore merci.

Bonjour,

J'ai ajouté dans le codepen une difficulté supplémentaire.

Dans les deux dernières lignes html il y a juste des input type=radio, pas d'input type=text.

Il faut que le clic sur le radio efface tous les input type = text qui ne sont pas vides.

j'ai pensé que ce serait facile avec la méthode : document.querySelector(' form').reset();

const rad = document.getElementsByName ('super');

for (let j = 0; j < rad.length; j++)
{	
rad[j].addEventListener('click', function ()
{
document.querySelector('form').reset();
}
);
}

Voyez-vous où est l'erreur ?

Merci d'avance.