Bonjour à tous,

Je suis en train de réaliser un petit scripr qui a pour but de rajouter une input file a chaquefois que l'on change la valeur de l'input précédent.

Malheureusement cette acction ne se priduit de 1 fois.

Je pense que cela vient du fait que ma variable s'initialise at dons le code ne s'ececute plus.

voici le code html:

<div id="pho" class="mb-1">
                            <small for="" class="c-gris">Téléchargez une photo de votre annonce.</small>
                            <input type="file" id="photo-1" name="photo-1" class="form-control mb-2">
                        </div>

et le code javascript:

for ( var i = 1 ; i <= 8 ; i++){
    $(`#photo-${i}`).change( function (e) {
        $("#pho").append(`<input  type="file" id="photo-${i}" name="photo-${i}" class="form-control mb-2">`);
    });
}

Merci pour votre lecture.

Bonne journée.

Cordialement.

Pas sûr de tout bien comprendre.
[mode  vieux réac = 'on']
Un petit effort d'orthographe aiderait peut-être
[mode vieux réac = 'off']

Mais bon, voilà en résumé ce que j'ai compris, si je met une photo dans l'input photo-1, ça doit créer un input 'photo-2', et si je met une photo dans photo-2, ça crée photo-3, etc.

Bon, petite chose que je repère à la ligne 3, l'id créé sera photo-i, donc si je change linput photo-1, ça va créer un input photo-1. Il faudrait remplacer i par i+1.

Ensuite, ça créé l'input, mais ça ne lui ajoute pas d'eventListener. Donc quand tu ajoute une photo dans l'input photo-2, il ne se passera rien.
Bon, je suis pas un warrior en javascript, j'ai de vieilles habitudes et je code plutôt "à l'ancienne" parce que j'ai appris les bases il y a plus de dix ans et je peine à me mettre à jour.
Mais perso j'aurais plutôt procédé comme ça :

- En premier lieu je ne ferais pas de boucle, vu qu'au départ je n'ai qu'un seul élément. je déclarerais donc une fonction qui ajoute un nouvel input, elle prend en paramètre l'id de l'input ayant reçu l'évènement ( event.target.id ). Dans le corps de cette fonction il faut extraire la valeur numérique, donc faire un substring après le - ( et je soustrait 0 pour forcer la conversion de type, avant de pouvoir faire un +1, sinon ça fait une concaténation ).

- dans cette fonction, je crée un nouvel input, lui ajoute les attributs voulus, lui ajoute l'eventListener avec pour callback la fonction déclarée dans la première étape, et enfin l'ajoute à ma div :

let newInput = document.createElement('input');
newInput.setAttribute('type', 'file');
let inputNumber = (event.target.id.substring(6) - 0) + 1;
newInput.setAttribute('id', "photo-" +1);
newInput.setAttribute('name', "photo-" + 1);
newInput.setAttribute('class', 'form-control mb-2');
newInput.addEventListener('change', () => {maFonctionAjouterInput(event)});
$("#pho").append(newInput);

( il y a peut-être une correction à faire dans la syntaxe pour bien transmettre l'event à maFonctionAjouterInput, j'ai écris ça à la volée en prenant mon café du matin, un peu la flemme de vérifier )
Voilà, je suis d'accord que ça fait des lignes en plus, mais encore une fois je suis pas un warrior et c'est comme ça que MOI je procéderais.

MAIS il y aurait un autre gros défaut dans tout ça : que se passe-t-il si je met une photo dans 'photo-1', puis dans 'photo-2', puis dans 'photo-3', et que finalement je change la photo que j'ai mis dans 'photo-1' ?

Bon, pour gérer ça, il faudrait que la callback de mon eventListener vérifie la valeur contenue dans l'input, si elle est vide, appeler maFonctionAjouterInput(), sinon, simplement remplacer la valeur.

Voilà, je te donne des pistes de réflexions, si tu n'y arrives pas et que personne d'autre de plus calé que moi ne t'aide, je reste à l'écoute ( je ferais un petit bout de code de mon côté et vérifierais qu'il est fonctionnel ).

 [edit]

Le café du matin ayant produit son effet salvateur, voici à quoi je suis parvenu :

HTML 

<section id="photos">
   <input type="file" id="photo-1">
</section>

JS

function ajouterInput(id)
{
    let inputNumber = (id.substring(6)-0) + 1;
    if(document.getElementById("photo-" + inputNumber))
        return;
    let newInput = document.createElement('input');
    newInput.setAttribute('type', "file");
    newInput.setAttribute('id', "photo-" + inputNumber);
    newInput.addEventListener('change', () => {ajouterInput(event.target.id);});
    document.getElementById('photos').appendChild(newInput);
}

document.getElementById('photo-1').addEventListener('change', () => {ajouterInput(event.target.id);});

 Voilà, c'est "old school" parce que je n'utilise pas JQurey, et ne suis pas familier avec certaines nouvelles syntaxes, mais ça fonctionne. Je te laisse ajouter les fioritures et optimiser la syntaxe.

-
Edité par LucasWerquin 18 septembre 2021 à 9:52:22

Bonjour LucasWerquin,

Un grand merci pour ton aide et pour les détails et surtout pour le code qui m' a bien aider à comprendre JavaScript !

Mais pas de quoi.

Je ne serais pas le seul à te donner ce conseil : commence par bien comprendre la javascript "pur" avant d'utiliser JQuery. Je trouve que JQuery "condense" un peu trop le code, et du coup le rend un peu moins lisible.