Pick up input values

Asked

Viewed 41 times

-2

Hello! In my code, I have 12 inputs. When I click on a given button, I need to check which of these inputs has something written and save that value in a single array. What I’m not able to do is store all these values in a single array. HTML:

<div class="inputsParticipantes">
        <h3>Quais são os nomes dos participantes ?</h3>
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <button class="comecar btn">Começar</button>
    </div>

Javascript:

  var $players = document.querySelectorAll('.inputPlayers');
  var $comecar = document.querySelector('.comecar');

  $comecar.addEventListener('click', jogar)

  function jogar(){
     var x = 0;
     while($players[x]){
        if($players[x].value.length >= 1){
        guardarValorInputs($players[x]) 
        }
        x++;
    }

    function guardarValorInputs(inputs){
    var valor = inputs.value;
    var arrValorInput = valor.split();
    console.log(arrValorInput);
}
javascript

  • Why the x++ doesn’t get drained of while?

  • But he’s inside the while

1 answer

-1


var players = document.querySelectorAll('.inputPlayers');
var comecar = document.querySelector('.comecar');
comecar.addEventListener('click', function() { 
  var a = [];
  /* Guardando resultados no array */
  players.forEach(function(e) {
      if ( e.value != "" )
      a.push(e.value);
  });

  console.log(JSON.parse(JSON.stringify(a)));
}, false);
<div class="inputsParticipantes">
        <h3>Quais são os nomes dos participantes ?</h3>
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <input type="text" class="inputPlayers">
        <button class="comecar btn">Começar</button>
</div>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.