var elem = document.getElementById("progress-bar");
var progress = 75;
elem.style.width = 80 + '%';
if (progress > 80) {
elem.style.background = "red";
}#myProgress {
height: 5px;
}
#progress-bar {
width: 50%;
background-color: green;
}<html>
<body>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<div id="myProgress" class="progress">
<div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</body>
</html>I'm currently utilizing a bootstrap progress bar and I'm curious if there is a way to change the color of the bar when it reaches a certain percentage.
In my external JavaScript file, I have the ability to alter the properties of the progress bar:
if (progress > 80) {
elem.style.background = 'red'; // THIS IS WHAT I NEED TO CHANGE
}
elem.style.width = progress + '%';
Despite using the elem.style.background instruction, the color does not update. Any suggestions on how to resolve this?
Thank you in advance.