Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Como pegar os valores dos inputs?

Tenho 10 inputs nomeados com uma classe 'valor'. Quero pegar os 10 valores de dentro do input e salvar em um array.

<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>
</div>
1 resposta
solução!

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