Making progress bar fill multiple times based on the value of a variable

Question

JSFiddle

So I have below a code for an html progress bar which fills up when you hit battle. I want to be able to assign a value to a variable so that when you hit battle it will fill the progress bar and battle the monster multiple times = to that value.

var auto = 3;

var progress = function(sec){
        var interval = 1000;//milliseconds
        setTimeout(function(){
        sec = sec+25;
            $('#bar').val(sec);
            if(sec <= 100)
                progress(sec);//call self with new value
      else if(sec > 100)
        $('#bar').val(0);
        },interval)
}

$('#battle').click(function() {
    $('#dam').html("You have hit the " + $('#monsters').val() + " for 5 damage");
    progress(0);//initialize progress bar
});

*Note: this is a duplicate of this question because I asked this two days ago and no one answered. So please delete one of these when I get an answer.

Answer 1

https://jsfiddle.net/6nrjw0Le/6/ , bar fills 3 times then stops for auto = 3

 var auto = 3; var times = 0; var progress = function(sec){ var interval = 1000;//milliseconds setTimeout(function(){ sec = sec+25; $('#bar').val(sec); if(sec <= 100){ progress(sec);//call self with new value } else if(sec > 100){ if(times===auto-1){ $('#bar').val(0); times = 0; } else { $('#bar').val(0); times++; progress(0); } } },interval) } $('#battle').click(function() { $('#dam').html("You have hit the " + $('#monsters').val() + " for 5 damage").delay(4500).fadeOut(400); progress(0);//initialize progress bar }); 

 body { background-color: #000; } progress { appearance: none; -webkit-appearance: none; width: 100%; } progress[value]::-webkit-progress-bar { background-color: #000; border: 1px solid #81ff14; border-radius: 5%; } progress[value]::-webkit-progress-value { color: #81ff14; } select { background-color: rgba(0, 0, 0, 0); border-color: #81ff14; color: #81ff14; margin-left: 100px; margin-top: 15px; } button { background-color: rgba(0, 0, 0, 0); border-color: #81ff14; color: #81ff14; border-radius: 10%; float: right; margin-right: 100px; margin-top: 15px; } #dam { color: #81ff14; font-family: sans-serif; font-size: 18px; max-width: 60%; text-align: center; float: right; margin-top: 40px; } 

 <progress max="100" value="0" id="bar"></progress> <select id="monsters"> <option>Fly</option> <option>Mouse</option> <option>Rat</option> <option>Rabbid Rabbit</option> <option>Baby Ent</option> <option>Murloc</option> <option>Ent</option> </select> <button type="button" id="battle">Battle!</button> <p id="dam"> </p> 

Answer 2

Keep calling progress(sec) and just reset sec = 0; when you reach the end: Increment an other var, and stop the loop when it reach your auto. You can instead decrements auto if you don't use it anywhere else (auto--).

 var auto = 3; var nb = 0; var progress = function(sec) { var interval = 1000; //milliseconds setTimeout(function() { sec = sec + 25; $('#bar').val(sec); if (sec > 100) { $('#bar').val(0); sec = 0; nb++; } if (nb < auto) progress(sec); //call self with new value }, interval) } $('#battle').click(function() { $('#dam').html("You have hit the " + $('#monsters').val() + " for 5 damage").delay(4500).fadeOut(400); progress(0); //initialize progress bar }); 

 body { background-color: #000; } progress { appearance: none; -webkit-appearance: none; width: 100%; } progress[value]::-webkit-progress-bar { background-color: #000; border: 1px solid #81ff14; border-radius: 5%; } progress[value]::-webkit-progress-value { color: #81ff14; } select { background-color: rgba(0, 0, 0, 0); border-color: #81ff14; color: #81ff14; margin-left: 100px; margin-top: 15px; } button { background-color: rgba(0, 0, 0, 0); border-color: #81ff14; color: #81ff14; border-radius: 10%; float: right; margin-right: 100px; margin-top: 15px; } #dam { color: #81ff14; font-family: sans-serif; font-size: 18px; max-width: 60%; text-align: center; float: right; margin-top: 40px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <progress max="100" value="0" id="bar"></progress> <select id="monsters"> <option>Fly</option> <option>Mouse</option> <option>Rat</option> <option>Rabbid Rabbit</option> <option>Baby Ent</option> <option>Murloc</option> <option>Ent</option> </select> <button type="button" id="battle">Battle!</button> <p id="dam"> </p>