Oi, David, tudo bem?
Eu adaptei a questão, assim:
<body>
<div class="informacoes">
<label class="numeracao"
>1º<input class="valor" type="text" required=""
/></label>
<label class="numeracao"
>2º<input class="valor" type="text" required=""
/></label>
<label class="numeracao"
>3º<input class="valor" type="text" required=""
/></label>
<label class="numeracao"
>4º<input class="valor" type="text" required=""
/></label>
<label class="numeracao"
>5º<input class="valor" type="text" required=""
/></label>
<label class="numeracao"
>6º<input class="valor" type="text" required=""
/></label>
<label class="numeracao"
>7º<input class="valor" type="text" required=""
/></label>
<label class="numeracao"
>8º<input class="valor" type="text" required=""
/></label>
<label class="numeracao"
>9º<input class="valor" type="text" required=""
/></label>
<label class="numeracao"
>10º<input class="valor" type="text" required=""
/></label>
<button id="button" type="submit">Clicar</button>
<div id="container"></div>
</div>
<script>
let buttonSubmit = document.getElementById("button");
buttonSubmit.addEventListener("click", function (event) {
event.preventDefault();
let valor = document.querySelectorAll(".valor");
let valores = [].map.call(valor, function (input) {
return input.value;
});
document.getElementById("container").innerHTML +=
"<br>" + valores + "<br />";
console.log(valores);
});
</script>
</body>
Acrescentei um botão com o tipo submit
, aqui: <button id="button" type="submit">Clicar</button>
para adicionar os valores numa div para vizuliazação dos valores do input. Tendo um botão com o valor de submit
, criei um evento
com o addEventListener
para captar esse evento. Nesse trecho abaixo está a lógica de adicionar os valores num array. A variável valores
cria uma array vazio chamando o método map
que incova uma função que percorre um array devolvendo um array novo. e que por sua vez chama o método call
que aceita argumentos passados dentro da função. Depois, foi retornado, valores dos inputs
let valores = [].map.call(valor, function (input) {
return input.value;
});
E finalmente, eu busquei a div onde os valores serão adicionados e utilizando a propriedade para escrever esses valores dentro da div:
document.getElementById("container").innerHTML +=
"<br>" + valores + "<br />";
console.log(valores);
A documentação das propriedades comentadas: https://developer.mozilla.org/pt-BR/docs/Web/API/Element/innerHTML
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/Call
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Sugiro testa o código com o console do navegador aberto para ver a lista do array que o código gera.
Se ficou alguma dúvida, é só falar! Bons estudos :}