How to limit a function to run 5 times? Javascript-CodePudding

I'm trying to limit a function to run 5 times only with no success. So the idea of the exercise is to create a function Person() that ask for a person's [name, surname and age] and ask for the user information 5 times. My problem is to limit the function, at the moment i can add as many user's as i want not only 5.

<body>
    <div >
        <div >
            <h1 id="title">Exercise</h1>
            <form>
                <div  id="name-field">
                    
                        <input type="text" placeholder="Nome" class='firstName' id="firstName-input">
                    
                   
                        <input type="text" placeholder="Apelido"  id="lastName-input">
                    
                    
                        <input type="text" placeholder="Idade"  id="age-input">
                    
                    <div >
                    <button type="button"  id="btn-adicionar" onclick="Person()">Add</button>
                    <button type="button"  id="btn-mostrar" onclick="Show()">Show</button>
                    </div>
                    <p id="p"></p>
                </div>
            </form>
        </div>
    </div>

let Persona = [];
Persona.values = {
    inputs: [],
    labels: {
        n: ' Name: ',
        a: ' Surname: ',
        i: ' Age: ',
    },
};

    function Adicionar() {
        
    
            let firstName = document.getElementById('firstName-input').value;
            let lastName = document.getElementById('lastName-input').value;
            let age = document.getElementById('age-input').value;

            Persona.values.inputs.push({
                firstName: firstName,
                lastName: lastName,
                age: age,
            });
        
        
    }

    function Show() {
        let text = '';
            
            
                for (var i = 0; i < Persona.values.inputs.length; i  ) {
        
                    text  = "<div class='outrow'>";

                    text  = "<span class='lab'>"   Persona.values.labels.n   '</span>';
                    text  =
                        "<span class='outv'>"  
                        Persona.values.inputs[i].firstName  
                        '</span>';
                    text  = "<span class='lab'>"   Persona.values.labels.a   '</span>';
                    text  =
                        "<span class='outv'>"  
                        Persona.values.inputs[i].lastName  
                        '</span>';
                    text  = "<span class='lab'>"   Persona.values.labels.i   '</span>';
                    text  =
                        "<span class='outv'>"   Persona.values.inputs[i].age   '</span>';
                    text  = '</div>';
                }
            
        let result = document.getElementById('p');
        result.innerHTML = text;
    }

I've tried to use an if statement but still have the same result.

 function Person() {
        let number = 0
    if (number < 5) {
            let firstName = document.getElementById('firstName-input').value;
            let lastName = document.getElementById('lastName-input').value;
            let age = document.getElementById('age-input').value;

            Persona.values.inputs.push({
                firstName: firstName,
                lastName: lastName,
                age: age,
            });
         number  
        }
        
    }```

CodePudding user response：

You can keep a counter outside the function Person and check its value inside the function before adding an entry. You can add a condition inside the function Person to stop adding new entries if the counter reaches 5.

Having the counter outside the function means that its value is not reset every time the function is called. This way, the value of the counter will persist between function calls, and you can keep track of the number of times the function has been called.

If the counter was inside the function, every time the function was called, a new counter would be created and initialized to 0. This would result in the function always adding a new entry, since the counter would never reach 5.

let counter = 0;

function Person() {
    if (counter < 5) {
        let firstName = document.getElementById('firstName-input').value;
        let lastName = document.getElementById('lastName-input').value;
        let age = document.getElementById('age-input').value;

        Persona.values.inputs.push({
            firstName: firstName,
            lastName: lastName,
            age: age,
        });
        counter  ;
    }
}

CodePudding user response：

You are adding your number counter variable inside the function that you want to limit, so everytime you call this function number will be reset to zero having no effect on the following condition. You actually want to declare your number variable as a global variable so it doesn't reset:

let number = 0 

function Person() {
  if(number < 5) {...}
  number  
}

CodePudding user response：

I think you don't need the counter variable at all, just check Persona.values.inputs.length.

function Person() {
    if (Persona.values.inputs.length < 5) {
        let firstName = document.getElementById('firstName-input').value;
        let lastName = document.getElementById('lastName-input').value;
        let age = document.getElementById('age-input').value;

        Persona.values.inputs.push({
            firstName: firstName,
            lastName: lastName,
            age: age,
        });
    }
}