循环Java代码[循环不会停止]

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+"%"; 


    }

}

Answer 1

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.

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

Answer 3

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.