Updating progress bar using JavaScript

Question

I am not getting how can I update progress bar. Here is my code,

socket.on('value',function(data){
    console.log(data); // For example, this prints value '10'
 // Here i have to update progress bar.
}

I want to divide value by 10, equally and adjust the progress width to 100%. Can anyone help me doing this? Is it possible? I am new to this concept. Please help me solving this.

Let me clarify: you have a <progress> element (developer.mozilla.org/ru/docs/Web/HTML/Element/progress), and you need to update it inside your callback? It's not clear from the question — serge1peshcoff
– serge1peshcoff, Commented Sep 26, 2016 at 9:58
This question is unclear. Would you please add more context, and some more examples of what you have tried so far? — evolutionxbox
– evolutionxbox, Commented Sep 26, 2016 at 10:01

serge1peshcoff · Accepted Answer · 2016-09-26 10:14:05Z

2

If you are using <progress> element, you can update it inside your callback like that:

// suppose your <progress> element is defined this way:
<progress min=0 max=100 id="myProgressBar"></progress>

// updating it:
socket.on('value',function(data){
    console.log(data); // For example, this prints value '10'
    $("#myProgressBar").val(data / 10) // here is the one way to update it
}

Also you can omit dividing by 10 (and just call $("#myProgressBar").val(data) ) and just specify max=10 (or whatever your maximum value is) inside your element's attributes.

edited Sep 26, 2016 at 10:14

answered Sep 26, 2016 at 10:05

serge1peshcoff

4,75011 gold badges48 silver badges80 bronze badges

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

1 Comment

naik3 Over a year ago

Thank you very much

Collectives™ on Stack Overflow

Updating progress bar using JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related