CODEWITHSUNDEEP
javascriptjquery
Adrian
Adrian

Reputation: 2291

Converting jquery to javascript progress bar

Please help me convert this JQuery to Javascript progress bar script

var generateButton = document.getElementById("generate");

if (generateButton.addEventListener) {
   generateButton.addEventListener("click", random, false);
}
else if (generateButton.attachEvent) {
   generateButton.attachEvent('onclick', random);
} 

function random(e) {
 setTimeout(function(){

    $('.progress .bar').each(function() {
        var me = $(this);
        var perc = me.attr("data-percentage");

        //TODO: left and right text handling

        var current_perc = 0;

        var progress = setInterval(function() {
            if (current_perc>=perc) {
                clearInterval(progress);
            } else {
                current_perc +=1;
                me.css('width', (current_perc)+'%');
            }

            me.text((current_perc)+'%');

        }, 50);

    });

},300);

var num = Math.random();

var greetingString = num;
document.getElementById("rslt").innerText = greetingString;
}

Here is the Live version: http://jsfiddle.net/chjjK/9/

Upvotes: 0

Views: 121

Answers (1)

tymeJV
tymeJV

Reputation: 104795

Pretty easy actually, use document.getElementsByClassName and a for loop to replace the each:

var bar = document.getElementsByClassName("bar");
    for (var i = 0; i < bar.length; i++) {
        var me = bar[i];
        var perc = me.getAttribute("data-percentage");
        var current_perc = 0;

        var progress = setInterval(function() {
            if (current_perc>=perc) {
                clearInterval(progress);
            } else {
                current_perc +=1;
                me.style.width = current_perc+'%';
            }

            me.innerHTML = ((current_perc)+'%');

        }, 50);
    }
}, 300);

Demo: http://jsfiddle.net/chjjK/13/

Upvotes: 1

Related Questions