html button onclick start javascript progressbar

Thank you for your quick response i really appriciate it i will put the plete working code underneath for anyone who wishes to use it.

HTML CODE

<html>
  <body>
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <span id="status"></span>
    <h1 id="finalMessage"></h1>
    <button onclick='start(0)'>Click</button>
  </body>
</html>

JAVASCRIPT CODE

function start(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al + "%";
  bar.value = al;
  al++;
  var sim = setTimeout("start(" + al + ")", 1);
  if (al == 100) {
    status.innerHTML = "100%";
    bar.value = 100;
    clearTimeout(sim);
    var finalMessage = document.getElementById('finalMessage');
    finalMessage.innerHTML = "Process is plete";
  }
}
var amountLoaded = 0;
//start(amountLoaded);

Thank you for your quick response i really appriciate it i will put the plete working code underneath for anyone who wishes to use it.

HTML CODE

<html>
  <body>
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <span id="status"></span>
    <h1 id="finalMessage"></h1>
    <button onclick='start(0)'>Click</button>
  </body>
</html>

JAVASCRIPT CODE

function start(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al + "%";
  bar.value = al;
  al++;
  var sim = setTimeout("start(" + al + ")", 1);
  if (al == 100) {
    status.innerHTML = "100%";
    bar.value = 100;
    clearTimeout(sim);
    var finalMessage = document.getElementById('finalMessage');
    finalMessage.innerHTML = "Process is plete";
  }
}
var amountLoaded = 0;
//start(amountLoaded);

Share Improve this question edited Oct 27, 2015 at 10:29 Krupesh Kotecha 2,4123 gold badges22 silver badges40 bronze badges asked Oct 27, 2015 at 10:14 user5134772

I just tried the code you've provided and it works - jsbin./nularicezo/edit?html,output – Shreyas Commented Oct 27, 2015 at 10:18

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

You can do that like this :

function start(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al + "%";
  bar.value = al;
  al++;
  var sim = setTimeout("start(" + al + ")", 1);
  if (al == 100) {
    status.innerHTML = "100%";
    bar.value = 100;
    clearTimeout(sim);
    var finalMessage = document.getElementById('finalMessage');
    finalMessage.innerHTML = "Process is plete";
  }
}

<html>

<body>
  <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
  <span id="status"></span>
  <h1 id="finalMessage"></h1>
  <!-- Add Button with event Click
  with this event start your progressbar with your function -->
  <button onclick='start(0)'>Click</button>
</body>

</html>

Not sure if that's what you're looking for but take a look at this : https://jsfiddle/sLggoyqn/1/

<button onClick="start(0);">Start</button>

Here is working code that fill progress bar on click of button

function start(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al + "%";
  bar.value = al;
  al++;
  var sim = setTimeout("start(" + al + ")", 1);
  if (al == 100) {
    status.innerHTML = "100%";
    bar.value = 100;
    clearTimeout(sim);
    var finalMessage = document.getElementById('finalMessage');
    finalMessage.innerHTML = "Process is plete";
  }
}

<html>
  <body>
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <span id="status"></span>
    <h1 id="finalMessage"></h1>
    <button onclick="start(0)">Click me</button>
  </body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html button onclick start javascript progressbar - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)