Forum : problème avec queryselectorAll et innerHtml de chaque SPAN

j'ai plusieurs inputs[file] que je selectionne et recupe le fichier et je l'affiche sous alert(nom fichier) seulement je n'arrive pas a afficher le nom du fichier dans son SPAN respectifs sous INNERHTML.
dommage que le nom d'un fichier est afficher dans tous les span des autres inputs
pourriez-vous m'aider svp; Meilleurs voeux.
voici mon code JAVASCRIPT

"```"

             //select tous les input file
            const modalInputfile = document.querySelectorAll("[data-toggle=modalInputfile]");
            const fileText = document.querySelectorAll(".textInputfile");
            // All input file
            for (let i = 0; i < modalInputfile.length; i++) {
                modalInputfile[i].addEventListener('change', function () {
                    const TextFiles = this.files;
                    for (let p = 0; p < fileText.length; p++) {
                        if (TextFiles.length > 0) {
                            const fileName = TextFiles[0].name;
                            // fileText[p].innerHTML= fileName;
                            alert("Le fichier selectionné est : "+fileName);
                        } else {
                        }
                    }
                });
            }

"```"

Le code HTML est le suivant

"```"

        <input type="file" name="image-file" id="fileInputdriver" data-toggle="modalInputfile" hidden>
        <label for="fileInputdriver">
                 <span class="custom-image-test"><i class="fas fa-camera-retro camera-retro"></i>Choisir votre fichier drivers</span>
          </label>
          <span  class="textInputfile">Aucun fichier selectionné pour l'instant</span>

"```"

popotte

Hello :)

Alors un moyen ce serait d'encapsuler chaque listes de input label span dans une div, et dans ton event tu choppes l'élément parent (la div) puius la dernière div de son child (le span) et ensuite tu set le HTML

En gros faudrait faire ça, bon j'ai un peu fais à l'aveugle alors c'est à adapter :p

const modalInputfile = document.querySelectorAll("[data-toggle=modalInputfile]");

modalInputfile.each(element => {
    element.addEventListener("change", event => {
        // event.target = input, parentNode = div, lastChild = last child of this div = span
        event.target.parentNode.lastChild.innerHTML = event.target.files[0].name
    })
})

Et pour le HTML faudrait wrapper chaque listes par une div pour target le parentNode du js

<div>
    <input type="file" name="image-file" id="fileInputdriver" data-toggle="modalInputfile" hidden>

    <label for="fileInputdriver">
        <span class="custom-image-test"><i class="fas fa-camera-retro camera-retro"></i>Choisir votre fichier drivers</span>
    </label>

    <span  class="textInputfile">Aucun fichier selectionné pour l'instant</span>
</div>

OOO777

Auteur

bonjour et merci pour votre reponse, dommage que ca ne meche pas
je teste meme pour changer le style css de lelement ciblé mais ca ne marche toujours pas

popotte

De rien ;)

Mmmh okay et en console tu as une erreur qui t'explique ce qui doit etre arrangé?

Sinon au pire une autre façon de faire, tu peux chopper toutes les span et faire un filtre en mettant une ref dans le input et le span

<input type="file" name="image-file" id="fileInputdriver" class="modalInputfile" data-toggle="modalInputfile_1" hidden>
<span data-ref="modalInputfile_1" class="textInputfile">Aucun fichier selectionné pour l'instant</span>

<!-- et le data-ref pour les autres blocs ce sera modalInputfile_2, 3, 4, 5, etc... -->

Et en JS

const modalInputfile = document.querySelectorAll(".modalInputfile"); // On prends tous les input
const textInputFiles = document.querySelectorAll(".textInputFile"); // On prends tous les span

modalInputfile.each(element => {
    element.addEventListener("change", event => {
        const ref = event.target.dataset["toggle"] // On récupère le data-toggle de l'input qui a changé
        const textInputFile = textInputFiles.filter(el => el.dataset["ref"] === ref) // On filtre les spans en en récupérant que celui qui a le même data-ref que le data-toggle de l'input qui a changé
        textInputFile.innerHTML = event.target.files[0].name // On change le html :)
    })
})

problème avec queryselectorAll et innerHtml de chaque SPAN

3 réponses