This code uses the built-in HTML <progress> element, which visually represents progress using a value and a max attribute. The progress bar starts at a value of 30 out of 100, and when the button is clicked, JavaScript increases the bar’s value by accessing and modifying the value property of the progress element. A condition ensures the value does not exceed the maximum limit, and the browser automatically updates the progress bar’s appearance whenever the value changes.
<!DOCTYPE html> <html> <body> <!-- Progress element with current value 30 and maximum value 100 --> <progress id="progressBar" value="30" max="100"></progress> <!-- Button to increase progress --> <button onclick="increase()">Increase</button> <!-- Link JavaScript file --> <script src="script.js"></script> </body> </html>
// Get progress bar element
let bar = document.getElementById("progressBar");
// Function to increase progress
function increase() {
// Increase progress value by 10
bar.value = bar.value + 10;
// Limit progress to maximum value
if (bar.value > 100) {
bar.value = 100;
}
}