html - how to increment the value of a progress bar when press a button javascript

this is a very simple program that when you press the button the value inside the progress bar increases until it reaches the 100%.

<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=".css">
</head>

<body>
  <div class="w3-container">

  <h2>dynamic Progress bar</h2>
  <p>example:</p>

  <div class="w3-light-grey">
    <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
  </div>
  <br>
  <button class="w3-button w3-green" onclick="move()">Click Me</button> 
</div>

<script>
function move() {
    var elem = document.getElementById("myBar"); 
    var width = 20;
    var id = setInterval(frame, 10);
    
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem.style.width = width + '%'; 
            elem.innerHTML = width * 1 + '%';
        }
    }
}
</script>

</body>
</html>

this is a very simple program that when you press the button the value inside the progress bar increases until it reaches the 100%.

<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools./w3css/4/w3.css">
</head>

<body>
  <div class="w3-container">

  <h2>dynamic Progress bar</h2>
  <p>example:</p>

  <div class="w3-light-grey">
    <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
  </div>
  <br>
  <button class="w3-button w3-green" onclick="move()">Click Me</button> 
</div>

<script>
function move() {
    var elem = document.getElementById("myBar"); 
    var width = 20;
    var id = setInterval(frame, 10);
    
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem.style.width = width + '%'; 
            elem.innerHTML = width * 1 + '%';
        }
    }
}
</script>

</body>
</html>

when you press the button whatever is the value inside the progressbar (eg 10% 20%) it reaches the 100%. i would that when i press the button, the value increases only only by a certain quantity (for example if the value is 10% and i press the button i want that the value will arrive at 20%).

Thanks to everyone!!

Share Improve this question edited May 3, 2018 at 13:30 Máté Safranka 4,1061 gold badge12 silver badges22 bronze badges asked May 3, 2018 at 13:11 Marco 471 silver badge3 bronze badges

This code is pretty much a straight copy and paste from W3Schools: w3schools./howto/howto_js_progressbar.asp Show what you have tried yourself, then maybe we will be able to help you! Here's a hint, setInterval(frame, 10) is going to call the frame() function every 10ms, and therefore keep updating the progress bar... – explv Commented May 3, 2018 at 13:17
So set the end point..... instead of 100, put it to the value you want. – epascarello Commented May 3, 2018 at 13:17

Add a ment |

5 Answers 5

Sorted by: Reset to default 2

A solution is to remove the setInterval, since it will call the function again without having to click on button.

This code simply define width outside of function, and then on each click, increment width by 10 and change the progress bar style.

var width = 20;

function move() {
  var elem = document.getElementById("myBar");
    if (width < 100) {
      width+=10;
      elem.style.width = width + '%';
      elem.innerHTML = width * 1 + '%';
    }
  
}

<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools./w3css/4/w3.css">

<body>
  <div class="w3-container">
    <h2>dynamic Progress bar</h2>
    <p>example:</p>
    <div class="w3-light-grey">
      <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
    </div>
    <br>
    <button class="w3-button w3-green" onclick="move()">Click Me</button>

  </div>
</body>

</html>

Here's a quick and simple way to do it with minimal changes, firstly you need to declare a global variable that holds the value of the "width-to-be". This is the desired width of the progress bar, once the animation has finished.

Next for the sake of clarity, I changed the name of the 'width' variable to widthAnim. When the value of widthValue is changed, widthAnim will increment until it reaches that same value.

The widthIncrement variable change be changed to whatever you like, and it will increment by that amount.

Finally, I added at extra condition in the frame function that makes sure it only goes up in increments of widthIncrement.

var widthValue = 20;

function move() {
  var elem = document.getElementById("myBar");
  var widthAnim = widthValue;
  var id = setInterval(frame, 10);
  var widthIncrement = 10;

  widthValue = widthAnim + widthIncrement;

  function frame() {
    if (widthAnim >= widthValue || widthValue > 100) {
      clearInterval(id);
    } else {
      widthAnim++;
      elem.style.width = widthAnim + '%';
      elem.innerHTML = widthAnim * 1 + '%';
    }
  }
}

<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools./w3css/4/w3.css">

<body>
  <div class="w3-container">
    <h2>dynamic Progress bar</h2>
    <p>example:</p>
    <div class="w3-light-grey">
      <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
    </div>
    <br>
    <button class="w3-button w3-green" onclick="move()">Click Me</button>

  </div>
</body>

</html>

I modified some of your code, when attach the 100% it will clear the counter and restart from 0%.

maybe help you :)

<!DOCTYPE html>
<html>
<head>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools./w3css/4/w3.css">
</head>

<body>
  <div class="w3-container">

  <h2>dynamic Progress bar</h2>
  <p>example:</p>

  <div class="w3-light-grey">
    <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
  </div>
  <br>
  <button class="w3-button w3-green" onclick="move()">Click Me</button> 
</div>

<script>
function move() {
    var elem = document.getElementById("myBar"); 
    var width = parseInt(elem.innerHTML);
    var aim = width + 10;
    var id = setInterval(frame, 10);
    
    function frame() {
        if (width >= aim) {
            clearInterval(id);
        } else if(width >= 100) {
            width=0; 
            aim = 10;
            elem.style.width = width + '%'; 
            elem.innerHTML = width * 1 + '%';
        } else {
            width++;
            elem.style.width = width + '%'; 
            elem.innerHTML = width * 1 + '%';
        }
    }
}
</script>

</body>
</html>

What you can do is set an initial value of width for example 20 and keep increasing it in setInterval callback till it is 40 (you can check that by taking its remainder with 20) and so on.

 if(width % 20 === 0 ) clearInterval(id)

Here is snippet

var elem = document.getElementById("myBar");
var width = 20;
var id = null;
var click = false;
function move() {
if(!click){
  click = true;
  id = setInterval(function() {
    width++;
    if (width > 100) width = 20;
    if (width % 20 === 0){
    clearInterval(id);
    click = false;
    }
    elem.style.width = width + '%';
    elem.innerHTML = width * 1 + '%';
  }, 30);
}

}

<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools./w3css/4/w3.css">

<body>
  <div class="w3-container">

    <h2>dynamic Progress bar</h2>
    <p>example:</p>

    <div class="w3-light-grey">
      <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
    </div>
    <br>
    <button class="w3-button w3-green" onclick="move()">Click Me</button>

  </div>
</body>
</html>

To achieve the desired result you should call clearInterval(id) when width is a multiple of 10. This will stop the frame() function from being called until the move() function is called again (when the user clicks the button)

To determine if width is a multiple of 10 the remainder operator can be used:

if (width % 10 == 0) {
    clearInterval(id);
}

width should also be a global variable, outside of the move() function so that progress can be tracked in between button clicks.

var width = 20;
var id = null;

function move() {
  if (width == 100) {
      return;
  }

  var elem = document.getElementById("myBar");

  if (id) {
      clearInterval(id);
  }

  id = setInterval(frame, 10);

  function frame() {
    width ++;
    elem.style.width = width + '%';
    elem.innerHTML = width * 1 + '%';

    if (width % 10 == 0) {
      clearInterval(id);
    }
  }
}

<!DOCTYPE html>
<html>
<title>example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools./w3css/4/w3.css">

<body>
  <div class="w3-container">
    <h2>dynamic Progress bar</h2>
    <p>example:</p>
    <div class="w3-light-grey">
      <div id="myBar" class="w3-container w3-green w3-center" style="width:20%">20%</div>
    </div>
    <br>
    <button class="w3-button w3-green" onclick="move()">Click Me</button>

  </div>
</body>

</html>

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

html - how to increment the value of a progress bar when press a button javascript - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)