Hi I am trying to create an animated progress bar that will feature:
- Auto start button
- Stop button
- Reset button
- A button that returns the value of the progress
- An input to set the progress
- increment button
- decrement button
I am very new to this and would appreciate any help sorry if my code is messy
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<title></title>
<style>
#mybar {
width: 10%;
height: 30px;
text-align: center;
line-height: 30px;
color: white;
}
</style>
</head>
<body>
<script src="../javascript/progress.js"></script>
<h1>The Progress Bar is Animated using</br>
JavaScript!</h1>
</br>
<div class="progress" style="height: 30px;">
<div id="mybar" class="progress-bar progress-bar-striped progress-bar-
animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-
valuemax="100" style="width: 0%"></div>
</div>
</br>
<div class="buttons">
<button type="button" onclick="Start()" id="strt" class="btn btn-
danger">Start Auto Progress</button>
<button type="button" onclick="Stop()" id="stp" class="btn btn-warning">Stop
Auto Progress</button>
</br>
<button type="button" onclick="Reset()" id="Rest" class="btn btn-
success">Reset</button>
<button type="button" onclick="setProgress()" id="set" class="btn btn-
dark">Set Progress</button>
<button type="button" onclick="getProgress()" id="return" class="btn btn-
info">Return Progress</button>
</br>
<button type="button" onclick="Increment()" id="Increm" class="btn btn-
primary">Increment</button>
<button type="button" onclick="Decrement()" id="Decrem" class="btn btn-
secondary">Decrement</button>
</div>
this is a link to the bootstrap i am using
- https://getbootstrap.com/docs/4.0/components/progress/
- https://getbootstrap.com/docs/4.0/components/buttons/
Im just wondering if some one can help me target the 'aria-valuenow' attribute so it goes from 0-100 instead of what the width var above.
JS function Start() {
var elem1 = document.getElementById("mybar");
//width starts 0%
var width = elem1.getAttribute('aria-valuenow');
//increase progress every 6th of a second
var id = setInterval(frame, 600);
function frame() {
//stops at 100
if (width >= 100) {
clearInterval(id);
} //end of if
else {
width++;
elem1.style.width = width + '%';
elem1.innerHTML = width * 1 + '%';
}//end of else
}//end of frame()
}//end of start()
function Stop() {
}
// alerts progress
function getProgress() {
var GET = width;
var GET2 = GET.getAttribute('aria-valuenow');
alert(GET);
}//end of getProgress()
function setProgress() {
var GET = document.getElementById('mybar');
var SET = GET.setAttribute('aria-valuenow', 25);
alert('progress bar set to' + GET);
}//end of getProgress()
//progress + 1
function Increment() {
