Javascript for loop [loop doesn't stop]

Question

I really try to find out why the for loop is looping again and again. My question is why is the first for looping again and again thought x is 1?

The result shows random counts of progressbars with a random progresses (img element is the progress). But it should only show 1 because x is 1. Can somebody tell me whats the answer?

function progress(){

    var min = 0;
    var max = 10;
    /*var x = Math.floor(Math.random() * (max - min)) + min;*/
    var x = 1;


    var main_div = document.createElement('div');
    main_div.className = "main_div";
    document.body.appendChild(main_div);

    for(var i = 0; i < x; i++){

        var einfuegen = document.createElement('div');
        einfuegen.className = 'statusbar';
        main_div.appendChild(einfuegen);    

        var einfuegen2 = document.createElement('img');
        einfuegen2.id = 'bild';
        einfuegen2.name = 'bild';
        einfuegen2.src = 'project_status.gif';  

        var zielort = document.getElementsByClassName('statusbar')[i];
        zielort.appendChild(einfuegen2);

        var min = 0;
        var max = 100;
        var x = Math.floor(Math.random() * (max - min)) + min;
        document.getElementsByTagName('img')[i].style.width = x+"%"; 


    }

}

You're changing x here: var x = Math.floor(Math.random() * (max - min)) + min;. — JLRishe
– JLRishe, Commented May 21, 2014 at 11:52

Bhushan Kawadkar · Accepted Answer · 2014-05-21 11:53:44Z

2

You need to use some different names for variable in loop

var min = 0;
var max = 100;
var x = Math.floor(Math.random() * (max - min)) + min;

it should be

var min1 = 0;
var max1 = 100;
var x1 = Math.floor(Math.random() * (max1 - min1)) + min1;

As you are using x in loop condition and modifying it inside loop, causing malfunction of loop.

answered May 21, 2014 at 11:53

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

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

Comments

JLRishe · Accepted Answer · 2014-05-21 12:02:54Z

You're changing x here:

var x = Math.floor(Math.random() * (max - min)) + min;

So the loop will loop a random number of times between 0 and 100.

Use a different variable name for the value of your progress bar, and for that matter, the max and min values of the progress bar:

var value = Math.floor(Math.random() * (maxValue - minValue)) + minValue;
document.getElementsByTagName('img')[i].style.width = value+"%";

This confusion is the very reason why JSLint recommends declaring all of your variables at the top of your function:

function progress(){
    var min = 0,
        max = 10,
        x = 1,
        i,
        main_div = document.createElement('div'),
        einfuegen,
        einfuegen2,
        zielort,
        minValue = 0,
        maxValue = 100,
        value;

    // rest of function...
}

The variable list above is very long because it has the values for both the outside of the loop and the inside of the loop. The solution to this is to factor your code out into separate functions:

function progress(){
    var min = 0,
        max = 10;
        x = 1,
        main_div = document.createElement('div'),
        i;

    main_div.className = "main_div";
    document.body.appendChild(main_div);

    for(i = 0; i < x; i += 1){
        mainDiv.appendChild(makeProgressBar());    
    }
}

function makeProgressBar() {
    var einfuegen = document.createElement('div'),
        einfuegen2 = document.createElement('img'),
        min = 0,
        max = 100,
        x = Math.floor(Math.random() * (max - min)) + min;

    einfuegen.className = 'statusbar';

    einfuegen2.id = 'bild';
    einfuegen2.name = 'bild';
    einfuegen2.src = 'project_status.gif';  

    einfuegen.appendChild(einfuegen2);

    einfuegen2.style.width = x+"%"; 

    return einfuegen;
}

This will also help to prevent variable name collisions.

Volkan Ulukut · Accepted Answer · 2014-05-21 11:54:22Z

0

x starts as 1 but you change it in the loop like this:

var x = Math.floor(Math.random() * (max - min)) + min;

which returns a number between 0-100 and the loop continues until it reaches above the random number.

answered May 21, 2014 at 11:54

Volkan Ulukut

4,2281 gold badge24 silver badges40 bronze badges

Collectives™ on Stack Overflow

Javascript for loop [loop doesn't stop]

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related