javascript – Why doesn't the event end?

Question:

I created a code with javascript, but it didn't work very well. I'm creating a page load, but the load bar doesn't load and the event I programmed never ends. 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"  />

Answer:

First, the start function isn't called at any point in your code, so it doesn't even start executing. Assuming the "load" should start along with the page, I'll call it via the onload event. Another error in the code is calling the function "start();" with setTimeout . string notation works when you will be calling through a property in HTML, such as the onload event. In this case, you're working directly in JavaScript, so just pass in the function name, without quotes. Finally, considering that the progress bar must disappear after the count ends, I inserted the else clause in the start function, hiding the progress bar once the count ends.

In fact, it doesn't 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, with the second overwriting the first. You can simply do:

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

Or yet

var progresso = 0;
var maximo = 100;

Which in this case works perfectly.

I hope that's the problem. If not, edit the question and try to be as clear as 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>
Scroll to Top
AllEscort