Value appears and disappears after click-Javascript

Question

Good evening, I made a javascript logic of inputs receiving the value of an array, all right however, when you click on the button to happen the event the values appear and disappear from the input quickly, follow the code, Thanks.

<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>

Answer 1

By default, the <button> assumes the type as submit, when within a form. What is happening is that by clicking the Submit event button is triggered and then the form is "sent" making the page clean.

Add the type="button" to the button

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>

To get the code through a input, add a input out of of the form with a id to make it easier to catch later. Add all the separation code inside the function separar(). To get the inputs use the id of form as a reference to be able to catch all inputs from inside it. Follow the example code

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>