CODEWITHSUNDEEP
javascripthtml
user3205119
user3205119

Reputation: 5

How can I use variables with an HTML5 progressbar?

<progress id="bar" max="25" value="5"></progress>

As you can see the max is a integer, so is value. How can I change the progress bar in order for it to be compatible with variables.

For example:

<progress id="PROGRESSBAR" max="VARIABLEMAX" value="VARIABLEVALUE"></progress>

This isn't working:

<progress id="expbar" max="upcost" value="clicks"></progress>
<script>

    document.getElementById("expbar").setAttribute("max", upcost);
    document.getElementById("expbar").setAttribute("value", clicks);

    var clicks = 0; // How many clicks you have
    var upgrades = 0; // How many upgrades you have purchased
    var upcost = 25; // How much the upgrades cost

Upvotes: 0

Views: 1196

Answers (1)

Hanlet Esca&#241;o
Hanlet Esca&#241;o

Reputation: 17380

If you are using jQuery this works:

var v = 25;
$("#bar").attr("max", v).attr("value", v);

with JavaScript this should work:

var v = 25;
document.getElementById("bar").setAttribute("max", v);
document.getElementById("bar").setAttribute("value", v);

Upvotes: 1

Related Questions