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? — hopkins-matt
– hopkins-matt, Commented Nov 23, 2016 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 stackoverflow.com/questions/566203/… — hopkins-matt
– hopkins-matt, Commented Nov 23, 2016 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. — TJR
– TJR, Commented Nov 23, 2016 at 16:32

jafarbtech · Accepted Answer · 2016-11-23 19:30:23Z

9

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>

edited Nov 23, 2016 at 19:30

answered Nov 23, 2016 at 16:39

jafarbtech

7,0551 gold badge41 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

psj01 Over a year ago

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)...

jafarbtech Over a year ago

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 <progress>

psj01 Over a year ago

Thank you. really liked the adding the class idea

jafarbtech Over a year ago

I am glad that it that it helped :)

ThatBrianDude · Accepted Answer · 2016-11-23 16:27:56Z

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, 2016 at 16:27

answered Nov 23, 2016 at 16:22

ThatBrianDude

3,2203 gold badges23 silver badges46 bronze badges

1 Comment

grunk Over a year ago

In browser other than IE you should use 'background' or 'background-color' instead of 'color'

user3187960 · Accepted Answer · 2016-11-23 16:28:22Z

0

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!! 
      }     

}

answered Nov 23, 2016 at 16:28

user3187960

3452 silver badges17 bronze badges

1 Comment

Gavin Over a year ago

This makes the progress color green for me. jsfiddle.net/aoqwvax2

Super User · Accepted Answer · 2017-05-19 12:58:30Z

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>

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related