Why does not the event end?

Navigation
3

I created a code with javascript, but it did not work very well. I'm creating a page loading, but it does not load the load bar and the event I scheduled never finishes. It was in the infinite loop: 

var progresso = new Number();
var maximo = new Number();
var progresso=0;
var maximo = 100;
function start(){
    if((progresso + 1) < maximo){
      progresso=progresso+1;
      document.getElementById("pg").value=progresso;
      setTimeout("start();",80);
    }
}
#barra_progresso
{
  FONT-SIZE: 1px;
  LEFT: 0px;
  WIDTH: 1px;
  POSITION: relative;
  TOP: 1px;
  HEIGHT: 5px;
  BACKGROUND-COLOR: #006400
}
#carregador_pai
{
  WIDTH: 100%;
  POSITION: absolute;
  TOP: 40%;
  TEXT-ALIGN: center
}
#carregador_fundo
{
  FONT-SIZE: 1px;
  LEFT: 9px;
  WIDTH: 113px;
  POSITION: relative;
  TOP: 8px;
  HEIGHT: 7px;
  BACKGROUND-COLOR: #ebebe4
}
#carregador
{
  BORDER-RIGHT: #6a6a6a 1px solid;
  PADDING-RIGHT: 0px;
  BORDER-TOP: #6a6a6a 1px solid;
  DISPLAY: block;
  PADDING-LEFT: 0px;
  FONT-SIZE: 11px;
  Z-INDEX: 2;
  PADDING-BOTTOM: 16px;
  MARGIN: 0px auto;
  BORDER-LEFT: #6a6a6a 1px solid;
  WIDTH: 130px;
  COLOR: #000000;
  PADDING-TOP: 10px;
  BORDER-BOTTOM: #6a6a6a 1px solid;
  FONT-FAMILY: Tahoma, Helvetica, sans;
  BACKGROUND-COLOR: #ffffff;
  TEXT-ALIGN: left
}
<div id="carregador_pai">
  <div id="carregador">
    <div align="center">Aguarde carregando...</div>
    <div>
      <center> 
        <p>
          <progress id="pg" max="100"></progress>       
        </p>
      </center>
    </div>
  </div>
</div>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg"height="720" width="1024"  />
    
asked by anonymous 18.02.2017 / 16:45

1 answer

1

First, the start function is not called at any time in your code, so it does not even begin to execute. Assuming the "upload" should start along with the page, I will call it through the onload event. Another error in the code is invoking the function "start ();" with setTimeout . The notation with string works when you call through a property in HTML, as in the onload event. In this case, you are working directly in JavaScript, so just pass only the name of the function, without quotes. Finally, considering that the progress bar should disappear after the count is finished, I inserted the start clause into the else function, hiding the progress bar as soon as the count ends.

In fact, it does not make much sense to do: 

var progresso = new Number();
var maximo = new Number();
var progresso=0;
var maximo = 100;

You would be declaring the two variables twice, the second would overwrite the first. You can simply do: 

var progresso = new Number(0);
var maximo = new Number(100);

Or even 

var progresso = 0;
var maximo = 100;

Which in this case works perfectly.

I hope that's the problem. If it is not, edit the question and try to be clearer about your need. 

var progresso = 0;
var maximo = 100

function start() {
  if ((progresso + 1) < maximo) {
    progresso = progresso + 1;
    document.getElementById("pg").value = progresso;
    setTimeout(start, 80);
  } else {
    document.getElementById("carregador_pai").style.display = 'none';
  }
}
#barra_progresso {
  FONT-SIZE: 1px;
  LEFT: 0px;
  WIDTH: 1px;
  POSITION: relative;
  TOP: 1px;
  HEIGHT: 5px;
  BACKGROUND-COLOR: #006400
}

#carregador_pai {
  WIDTH: 100%;
  POSITION: absolute;
  TOP: 40%;
  TEXT-ALIGN: center
}

#carregador_fundo {
  FONT-SIZE: 1px;
  LEFT: 9px;
  WIDTH: 113px;
  POSITION: relative;
  TOP: 8px;
  HEIGHT: 7px;
  BACKGROUND-COLOR: #ebebe4
}

#carregador {
  BORDER-RIGHT: #6a6a6a 1px solid;
  PADDING-RIGHT: 0px;
  BORDER-TOP: #6a6a6a 1px solid;
  DISPLAY: block;
  PADDING-LEFT: 0px;
  FONT-SIZE: 11px;
  Z-INDEX: 2;
  PADDING-BOTTOM: 16px;
  MARGIN: 0px auto;
  BORDER-LEFT: #6a6a6a 1px solid;
  WIDTH: 130px;
  COLOR: #000000;
  PADDING-TOP: 10px;
  BORDER-BOTTOM: #6a6a6a 1px solid;
  FONT-FAMILY: Tahoma, Helvetica, sans;
  BACKGROUND-COLOR: #ffffff;
  TEXT-ALIGN: left
}
<body onload="start()">
  <div id="carregador_pai">
    <div id="carregador">
      <div align="center">Aguarde carregando...</div>
      <div>
        <center>
          <p><progress id="pg" max="100"></progress> </p>
        </center>
      </div>
    </div>
  </div>
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg"height="720" width="1024" />
</body>
    
18.02.2017 / 21:11
Simple login Firebase Repetition structure