Run javascript by counting click to show option on screen?

Question

Run javascript by counting click to show option on screen?

Navigation

#1 by (1 votes)
#2 by (-1 votes)

1

I have a code that shows fields on the screen according to the click, after the first click it will increment a 'QtdClick' variable, it occurs that I did not want it to show all the fields, I only want when it is 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>

javascript jquery

asked by anonymous 29.04.2017 / 04:36

2 answers

Date format How to execute a javascript referencing a button ID?

score 1 · Answer 1

You can do this 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><inputtype="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% initial% in CSS
uses the ID array index to compare with display = 'none'; and with a ternary you choose to show or hide.

Another idea, even more scalable is not even using IDs in the 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><inputtype="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>

score -1 · 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>