Create a JavaScript button that increases a progress bar value by 1 and adjusts its width style by 10 units

Question

Create a JavaScript button that increases a progress bar value by 1 and adjusts its width style by 10 units

Here is the code for managing a progress bar using JavaScript:


function getProgress() {
    return document.getElementById("progressbar").getAttribute("aria-valuenow");
}

function setProgress(value) {
    document.getElementById("progressbar").setAttribute("aria-valuenow", value);
    document.getElementById("progressbar").setAttribute("style", "width: " + value + "%");
    document.getElementById("progressbar").innerHTML = value + "%";
}

function increment() {
    var i = getProgress();
    if (i < 100) {
        i++;
        setProgress(i);
    } else {
        alert("Download Finished!");
    }
}

function decrement() {
    var d = getProgress();
    setProgress(d - 1);
}

function resetButton() {
    setProgress(0);
}

To change the values and width style when clicking the increment button, make sure to call the `increment()` function. The HTML part contains buttons for various operations on the progress bar.

javascript bootstrap-4

Answer 1

Answer №1

There were some issues with the functions for getProgress and setProgress. In the getProgress function, you were incorrectly using return multiple times, so we have corrected it to just return the value. Additionally, in the setProgress function, there was a syntax error in setting the width attribute. Below is the updated working version of the code.

function getProgress() {
  var progressValue = document.getElementById("progressbar").getAttribute("aria-valuenow");
  return progressValue;
}

function setProgress(value) {
  document.getElementById("progressbar").setAttribute("aria-valuenow", value);  
  document.getElementById("progressbar").setAttribute("style", "width: " + value + "%;");
  document.getElementById("progressbar").innerHTML = (value + "%");
}

function increment() {
  var currentValue = getProgress();
  if (currentValue < 100) {
    currentValue++;
    setProgress(currentValue);
  } else {
    alert("Download Finished");
  }
}

function decrement() {
  var currentProgress = getProgress();
  setProgress(currentProgress - 1);
}

function resetButton() {
  var resetValue = getProgress();
  setProgress(resetValue = 0);
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  <title>Progress Bar</title>

</head>

<body>
  <!-- Container -->
  <div class="container">

    <h1>This Progress bar is animated using <br>JavaScript!</h1>
    <br>

    <!-- Div For Progress Bar -->
    <div class="progress">
      <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="progressbar">0%</div>
    </div>

    <br>
    <!-- Buttons -->
    <button type="button" class="btn btn-primary" onclick="increment()">Increment</button>
    <button type="button" class="btn btn-dark" onclick="resetButton()">Reset</button>
    <button type="button" class="btn btn-success" onclick="decrement()">Decrement</button>
    <button type="button" class="btn btn-warning" onclick="">Start Auto Progress!</button>
    <button type="button" class="btn btn-danger" onclick="">Stop Auto Progress!</button>

    <p id="value"> </p>
    <!-- End of Container -->
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  <script src="Assignment4.js"></script>
</body>

</html>

Answer 2

There were some issues with the functions for getProgress and setProgress. In the getProgress function, you were incorrectly using return multiple times, so we have corrected it to just return the value. Additionally, in the setProgress function, there was a syntax error in setting the width attribute. Below is the updated working version of the code.

function getProgress() {
  var progressValue = document.getElementById("progressbar").getAttribute("aria-valuenow");
  return progressValue;
}

function setProgress(value) {
  document.getElementById("progressbar").setAttribute("aria-valuenow", value);  
  document.getElementById("progressbar").setAttribute("style", "width: " + value + "%;");
  document.getElementById("progressbar").innerHTML = (value + "%");
}

function increment() {
  var currentValue = getProgress();
  if (currentValue < 100) {
    currentValue++;
    setProgress(currentValue);
  } else {
    alert("Download Finished");
  }
}

function decrement() {
  var currentProgress = getProgress();
  setProgress(currentProgress - 1);
}

function resetButton() {
  var resetValue = getProgress();
  setProgress(resetValue = 0);
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  <title>Progress Bar</title>

</head>

<body>
  <!-- Container -->
  <div class="container">

    <h1>This Progress bar is animated using <br>JavaScript!</h1>
    <br>

    <!-- Div For Progress Bar -->
    <div class="progress">
      <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="progressbar">0%</div>
    </div>

    <br>
    <!-- Buttons -->
    <button type="button" class="btn btn-primary" onclick="increment()">Increment</button>
    <button type="button" class="btn btn-dark" onclick="resetButton()">Reset</button>
    <button type="button" class="btn btn-success" onclick="decrement()">Decrement</button>
    <button type="button" class="btn btn-warning" onclick="">Start Auto Progress!</button>
    <button type="button" class="btn btn-danger" onclick="">Stop Auto Progress!</button>

    <p id="value"> </p>
    <!-- End of Container -->
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  <script src="Assignment4.js"></script>
</body>

</html>

Create a JavaScript button that increases a progress bar value by 1 and adjusts its width style by 10 units

Answer №1

Similar questions

Creating a fetcher that seamlessly functions on both the server and client within Nextjs 13 - the ultimate guide!

Efficiently pinpointing the <div> element with precision using jQuery

Using Node.js to establish communication between HTML and Express for exchanging data

Is it possible to utilize the package.json "resolutions" field to replace lodash with lodash-es?

Please explain this ES6 syntax to me: Using a colon after a function call

When the button is clicked, the ng-click event will trigger the addClass function, but only on the second click

Can $event be transferred from cshtml to Vue.component?

Is it possible to instantiate a Backbone view by referencing its string name that is stored within a JavaScript object?

Isolating a type as a constant in Typescript within a .js file?

Eliminating characteristics and rejuvenating the component

Removing redundant names from an array using Typescript

Tips for Sending Information to the Current Page Using JQuery

Ways to delay the inner function's output?

how to properly position an image using javascript

The cannon-es program experiences crashes every time two Convex polyhedrons collide with each other

The require statement in Vue.js is failing to function dynamically

Tips for sending attributes to jQuery autocomplete

Avoiding the reset of a variable when utilizing state in React

How can I loop the keyframe animation across various elements of an SVG file simultaneously?

Exploring the journey of History.js and Same-Origin Policy leading to HTTPS encryption