Run javascript counting click to show option on screen?

Question

I have a code that shows fields on the screen according to the click, after the first click it will increment a variable 'Qtdclick', occurs that I did not want to show all fields, I only want when it is the 2 second click, 3 click etc, individually.

Example:

<script>


      $(document).ready(function(){

            //esconde o campo na abertura da página
            document.getElementById('extraum').style.display = 'none';
            document.getElementById('extradois').style.display = 'none';
            document.getElementById('extratres').style.display = 'none';
            document.getElementById('extraquatro').style.display = 'none';

            //se o botão for clikado 1 vez, mostra o campo  
            var QtdClick = 1; //inicindo 
            var btn1 = document.querySelector("#mostracampo1");
            btn1.addEventListener('click',function(e){

            if (QtdClick ==1 ){
                document.querySelector("#extraum").style.display = 'block';
                QtdClick++;
                alert(QtdClick);
            }

            if (QtdClick ==2 ){
                document.querySelector("#extradois").style.display = 'block';
                QtdClick++;
                alert(QtdClick);
            }

            if (QtdClick ==3 ){
                document.querySelector("#extratres").style.display = 'block';
                QtdClick++;
                alert(QtdClick);
            }

            if (QtdClick ==4 ){
                document.querySelector("#extraquatro").style.display = 'block';
                QtdClick++;
                alert(QtdClick);
            }

          });

       });


    </script>

html:

<input type="text" required class="form-control" id="extraum" placeholder="campo 1">
   <input type="text" required class="form-control" id="extradois" placeholder="campo 2">
   <input type="text" required class="form-control" id="extratres" placeholder="campo 3">
   <input type="text" required class="form-control" id="extraquatro" placeholder="campo 4">

   <a href="#" id="mostracampo1" class="btn btn-custom  btn-branco btn-lg">Mostar Campo Botão</a>

Answer 1

You can do it with less code, more optimized:

$(document).ready(function() {
  var QtdClick = 0; // iniciando 
  var inputs = ['extraum', 'extradois', 'extratres', 'extraquatro'].map(function(id) {
    return document.getElementById(id);
  });
  var btn1 = document.querySelector("#mostracampo1");
  btn1.addEventListener('click', function(e) {
    inputs.forEach(function(input, i) {
      input.style.display = QtdClick == i ? 'block' : 'none';
    });
    QtdClick++;
  });
});

input {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" required class="form-control" id="extraum" placeholder="campo 1">
<input type="text" required class="form-control" id="extradois" placeholder="campo 2">
<input type="text" required class="form-control" id="extratres" placeholder="campo 3">
<input type="text" required class="form-control" id="extraquatro" placeholder="campo 4">

<a href="#" id="mostracampo1" class="btn btn-custom  btn-branco btn-lg">Mostar Campo Botão</a>

The ideas in the code are:

• puts the display = 'none'; initial in CSS
• uses the Ids array input to compare with QtdClick and with a ternary you choose to show or hide.

Another idea, even more scalable is not even using Ids in inputs, and would look like this:

$(document).ready(function() {
  var QtdClick = 0; // iniciando 
  var inputs = [].slice.call(document.querySelectorAll('input'));
  var btn1 = document.querySelector("#mostracampo1");
  btn1.addEventListener('click', function(e) {
    inputs.forEach(function(input, i) {
      input.style.display = QtdClick == i ? 'block' : 'none';
    });
    QtdClick++;
  });
});

input {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" required class="form-control" placeholder="campo 1">
<input type="text" required class="form-control" placeholder="campo 2">
<input type="text" required class="form-control" placeholder="campo 3">
<input type="text" required class="form-control" placeholder="campo 5">
<input type="text" required class="form-control" placeholder="campo 6">
<input type="text" required class="form-control" placeholder="campo 7">
<input type="text" required class="form-control" placeholder="campo 8">
<input type="text" required class="form-control" placeholder="campo 9">
<input type="text" required class="form-control" placeholder="campo 10">
<input type="text" required class="form-control" placeholder="campo 11">

<a href="#" id="mostracampo1" class="btn btn-custom  btn-branco btn-lg">Mostar Campo Botão</a>

Answer 2

I already have the answer:

<script>

      $(document).ready(function(){

            //esconde o campo na abertura da página
            document.getElementById('extraum').style.display = 'none';
            document.getElementById('extradois').style.display = 'none';
            document.getElementById('extratres').style.display = 'none';
            document.getElementById('extraquatro').style.display = 'none';

            //se o botão for clikado 1 vez, mostra o campo  
            var QtdClick = 1; //inicindo 
            var btn1 = document.querySelector("#mostracampo1");
            btn1.addEventListener('click',function(e){

            while(QtdClick < 15){

                if(QtdClick ==1){
                  document.querySelector("#extraum").style.display = 'block';
                  QtdClick++;
                  alert(QtdClick);
                  break; 
                }

                if (QtdClick ==2 ){
                    document.querySelector("#extradois").style.display = 'block';
                    QtdClick++;
                    alert(QtdClick);
                    break; 
                }

                if (QtdClick ==3 ){
                    document.querySelector("#extratres").style.display = 'block';
                    QtdClick++;
                    alert(QtdClick);
                    break;
                }

                if (QtdClick ==4 ){
                document.querySelector("#extraquatro").style.display = 'block';
                QtdClick++;
                alert(QtdClick);
                break; 
            }

            }});

       });


    </script>