0

Boa noite, fiz uma lógica em javascript dos inputs receberem o valor de um array, tudo certo porém, quando clica no botão para acontecer o evento os valores aparecem e somem do input rapidamente, segugue o código, Obrigado.

<script>
var codigo = "23794130047008001672190051686005178110000010890"

var metade = Math.floor(codigo.length / 8);
var seis = Math.floor(codigo.length / 7);
var um = Math.floor(codigo.length/47);
var rest = Math.floor(codigo.length/3)

var res = codigo.substr(0,metade) + " ," + codigo.substr(5,metade)  + " ," + codigo.substr(10,metade)
+ " ," + codigo.substr(15,seis) + " ," + codigo.substr(21,metade) + " ," + codigo.substr(26,seis)
+ " ," + codigo.substr(32,um) + " ," + codigo.substr(33,rest);


var div = res.split(" ,")

function separar(){
    let teste = document.getElementsByTagName("input")

    for(i =0; i< teste.length; i++){
    teste[i].value = div[i]
    console.log(teste[i].value = div[i])
    }
}



</script>


<form id="form" >


    <label>Digite o código</label>
<br/><button onclick="separar()">Separar</button>
<br/>
<br/>



    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>



</form>
2
  • Qual a ideia? cada input ficar com um valor?
    – JrD
    Commented 19/04/2019 às 0:13
  • Cada input recebe um valor do array 'div', quando coloco o window.onload na frente da function os valores já iniciam corretamente nos inputs, mas sem, quando clico, aparece rapidamente e some.
    – israel
    Commented 19/04/2019 às 0:16

1 Resposta 1

1

Por padrão, o <button> assume o type como submit, quando dentro de um formulário. O que está acontecendo é que, ao clicar no botão o evento submit é disparado e então o formulário é "enviado" fazendo com que a página seje limpa.

Adicione o type="button" ao botão

var codigo = "23794130047008001672190051686005178110000010890"

var metade = Math.floor(codigo.length / 8);
var seis = Math.floor(codigo.length / 7);
var um = Math.floor(codigo.length/47);
var rest = Math.floor(codigo.length/3)

var res = codigo.substr(0,metade) + " ," + codigo.substr(5,metade)  + " ," + codigo.substr(10,metade)
+ " ," + codigo.substr(15,seis) + " ," + codigo.substr(21,metade) + " ," + codigo.substr(26,seis)
+ " ," + codigo.substr(32,um) + " ," + codigo.substr(33,rest);

var div = res.split(" ,")

function separar(){
    let teste = document.getElementsByTagName("input")

    for(i =0; i< teste.length; i++){
        teste[i].value = div[i]
        //console.log(teste[i].value = div[i])
    }
}
<form id="form" >
    <label>Digite o código</label>
<br/><button type="button" onclick="separar()">Separar</button>
<br/>
<br/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
</form>

Para pegar o código através de um input, adicione um input fora do formulário com um id pra ficar mais fácil de pegar depois. Adicione todo o código de separação dentro da função separar(). Para pegar os inputs use o id do form como referência para poder pegar todos os inputs de dentro dele. Segue o código de exemplo

function separar(){
    var codigo = document.getElementById("codigo").value;

    var metade = Math.floor(codigo.length / 8);
    var seis = Math.floor(codigo.length / 7);
    var um = Math.floor(codigo.length/47);
    var rest = Math.floor(codigo.length/3)

    var res = codigo.substr(0,metade) + " ," + codigo.substr(5,metade)  + " ," + codigo.substr(10,metade)
+ " ," + codigo.substr(15,seis) + " ," + codigo.substr(21,metade) + " ," + codigo.substr(26,seis)
+ " ," + codigo.substr(32,um) + " ," + codigo.substr(33,rest);

    var div = res.split(" ,")
    let teste = document.getElementById("form").getElementsByTagName("input")

    for(i =0; i< teste.length; i++){
        teste[i].value = div[i]
        //console.log(teste[i].value = div[i])
    }
}
<input type="text" id="codigo">
<form id="form" >
    <label>Digite o código</label>
<br/><button type="button" onclick="separar()">Separar</button>
<br/>
<br/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
</form>

3
  • Cara muito obrigado !! só uma pergunta se eu quisesse ao invés de definir esse valor fixo, pegar de um input por exemplo, como faria ? estou tentando com queryselector mas da esse erro: Uncaught TypeError: Cannot read property '0' of undefined
    – israel
    Commented 19/04/2019 às 0:24
  • @israel Adicionei à resposta. Caso considere essa resposta como adequada, não se esqueça de marca-la como correta :)
    – JrD
    Commented 19/04/2019 às 0:38
  • Perfeito !! Muito Obrigado
    – israel
    Commented 19/04/2019 às 0:45

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 .