How can I change the color of a progress bar using javascript?

Question

Please see my code so far (jsfiddle).

I am trying to change the color of the progress bar once it reaches max capacity.

How can I accomplish this?

HTML code:

<textarea></textarea>
<span id="characters">255 left</span>

<br>
<progress id="myProgress" value="0" max="255">
</progress>

JS code:

$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);

function updateCount() {
     var max = 255;
    var cs = $(this).val().length;
    document.getElementById("characters").innerHTML= max-cs + " left..";
    document.getElementById("myProgress").value = cs;
    if (event.which < 0x20) {
        return;
      }
    if (cs == max) {
        event.preventDefault();
        // make the color of progress bar red here!! 
      }     

}

Possible duplicate of [How to set color for CSS3 html5 progress element?](http://stackoverflow.com/questions/18368202/how-to-set-color-for-css3-html5-progress-element) — hopkins-matt, Nov 23 '16 at 16:23
@OmriAharon OP is asking how to change color. Color is changed using CSS. If OP doesn't know how to use JS to change CSS, then it would be a duplicate of http://stackoverflow.com/questions/566203/changing-css-values-with-javascript — hopkins-matt, Nov 23 '16 at 16:29
If you copy paste in multiple characters you can blow through your cs == max check. You probably will want to check if cs >= max and potentially do other checks to make sure you can't paste in text that would put you over your 255 limit. — TJ Rockefeller, Nov 23 '16 at 16:32

jafarbtech · Accepted Answer · 2016-11-23T19:30:23.197

add progress::-webkit-progress-value in css it changes color and also define it jquery.

      if(cs>=max) 
      $('#myProgress').css("background-color", "red");

or you can assign a class which will assign the background color like

      if(cs>=max) 
      $('#myProgress').addClass("red");

$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);

function updateCount() {
  var max = 255;
    var cs = $(this).val().length;
    if(cs>max) $(this).val($(this).val().toString().substring(0,max));
    document.getElementById("characters").innerHTML= max-cs + " left..";
    document.getElementById("myProgress").value = cs;
      if(cs>=max){
        $('#myProgress').addClass("red");
        }
      else{
        $('#myProgress').removeClass("red");

        }
    if (event.which < 0x20) {
        return;
      }
    if (cs >= max) {
        event.preventDefault();
        // make the color of progress bar red here!! 
      }     
      
}

progress.red{
  background-color:red;
  color:red;
  }
progress.red[value] {color:red} /* IE10 */
progress.red::-webkit-progress-bar-value {background-color:red}
progress.red::-webkit-progress-value {background-color:red}
progress.red::-moz-progress-bar {background-color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea></textarea>
<span id="characters">255 left</span>

<br>
<progress id="myProgress" value="0" max="255">
</progress>

could you please explain why css is needed there? i dont understand why progress::-webki-progress-bar-value.... is needed there for it to turn red.. with out the css it just turns green (which also i dont understand why)... — psj01, Nov 23 '16 at 19:03
actually light blue(unfinished) and the green(finished atleast one time) are the default commbinations. so to override it we are using three browser standards webkit, moz, and IE(it uses color). thats why it shows the default value if you delete the css. `-webkit-progress-bar` actually denotes the background colour of the — jafarbtech, Nov 23 '16 at 19:17

ThatBrianDude · Answer 2 · 2016-11-23T16:27:56.383

2

EDIT: So to be sure this works in most browsers you should use background-color over color.

Since you're already using JQuery:

$('#myProgress').css("background-color", "red");

pure JS:

document.getElementById('myProgress').style.backgroundColor = 'red';

edited Nov 23 '16 at 16:27

answered Nov 23 '16 at 16:22

ThatBrianDude

2,952
3
16
42

In browser other than IE you should use 'background' or 'background-color' instead of 'color' – grunk Nov 23 '16 at 16:27

score 0 · Answer 3 · answered Nov 23 '16 at 16:28

Just add

document.getElementById("myProgress").style.background = "#f3f3f3";

once you reach the max value

This should work fine

$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);

function updateCount() {
     var max = 255;
    var cs = $(this).val().length;
    document.getElementById("characters").innerHTML= max-cs + " left..";
    document.getElementById("myProgress").value = cs;
    if (event.which < 0x20) {
        return;
      }
    if (cs == max) {
             document.getElementById("myProgress").style.background = "#f3f3f3";
        event.preventDefault();
        // make the color of progress bar red here!! 
      }     

}

This makes the progress color green for me. https://jsfiddle.net/aoqwvax2/ — Gavin, Nov 23 '16 at 16:33

score 0 · Answer 4 · answered May 19 '17 at 12:58

Check updated snippet for this

$(document).on('keyup keydown', 'textarea', updateCount);

function updateCount(event) {
    var max = 255;
    var cs = $(this).val().length;
    $("#characters").html(max - cs + " left..");
    $("#myProgress").val(cs);
    if (event.which < 0x20 && cs == max) {
        return;
    }
    if (cs == max) {
        event.preventDefault();
        $('#myProgress').addClass("red");
    } else {
        $('#myProgress').removeClass("red");
    }
}

progress.red {
    background-color: red;
    color: red;
}
progress.red[value] {
    color: red
}
progress.red::-webkit-progress-bar-value {
    background-color: red
}
progress.red::-webkit-progress-value {
    background-color: red
}
progress.red::-moz-progress-bar {
    background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<span id="characters">255 left</span>
<br>
<progress id="myProgress" value="0" max="255"></progress>

How can I change the color of a progress bar using javascript?

4 Answers4

Linked