CODEWITHSUNDEEP
javascripthtmlcssprogress-bar
Marco
Marco

Reputation: 47

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="https://www.w3schools.com/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!!

Upvotes: 3

Views: 8231

Answers (5)

Dimpagger
Dimpagger

Reputation: 11

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.com/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>

Upvotes: 1

Llewelyn Griffiths
Llewelyn Griffiths

Reputation: 25

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.com/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>

Upvotes: 1

explv
explv

Reputation: 2759

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.com/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>

Upvotes: 0

Muhammad Usman
Muhammad Usman

Reputation: 10148

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.com/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>

Upvotes: 0

Henkan
Henkan

Reputation: 310

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.com/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>

Upvotes: 2

Related Questions