0

Olá eu estou tentando criar inputs e neles gostaria de colocar os valores que tem no meu array.

 <div id="guias">
    <div class="form-row">
        <div class="col-md-6 mb-3" id="origem">
            <label for="Email">Email: </label>
            <input type="text" name="Email[]" id="Email" class="form-control"
                placeholder="Ex: [email protected]">
            <div class="invalid-feedback">

            </div>
        </div>
    </div>

    <div id="destino" class="form-row"></div>
</div>

<script>
    **const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];**

    console.log("Meu array: " + array);

    for (i = 0; i < array.length; i++) {

        var clone = document.getElementById('origem').cloneNode(true);
        var destino = document.getElementById('destino');
        destino.appendChild(clone);

        var camposClonados = clone.getElementsByTagName('input');

        camposClonados[i].value = array[i];
    }

</script>

Porem o resultado esta dando assim:

Resultado

Ele só esta colocando em um único campo e não esta criando os demais, e além disso não esta colocando no primeiro input esta colocando no segundo.

Alguém poderia me ajudar.

1 Resposta 1

1

Porque não atribui o value no elemento que foi clonado antes de fazer o append? Isso já vai adicionar o elemento pronto, e além disso, pode declarar a variável "destino" uma única vez antes o for:

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log("Meu array: " + array);

var destino = document.getElementById('destino');

for (i = 0; i < array.length; i++) {
    var clone = document.getElementById('origem').cloneNode(true);
    // encontra o primeiro "input" com a classe "form-control" a partir do elemento clonado e muda o seu valor
    clone.querySelectorAll("input.form-control")[0].value = array[i];        
    destino.appendChild(clone);
}
 <div id="guias">
    <div class="form-row">
        <div class="col-md-6 mb-3" id="origem">
            <label for="Email">Email: </label>
            <input type="text" name="Email[]" class="form-control"
                placeholder="Ex: [email protected]">
            <div class="invalid-feedback">

            </div>
        </div>
    </div>

    <div id="destino" class="form-row"></div>
</div>

4
  • Então eu gostaria de colocar apartir do primeiro Commented 1/05/2021 às 17:35
  • "Para cada campo que for criado adicionar um valor" então o título da pergunta está errado :) Pq não remove o primeiro item do array então e já coloca no primeiro campo? Commented 1/05/2021 às 17:40
  • Ha sim consegui colocar. Commented 1/05/2021 às 17:47
  • Obrigado por ajudarem :) Commented 1/05/2021 às 17:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .