I was just wondering if I could get some guidance on an issue I am having with nested for loops in javascript.

I currently have the following nested for loop in place

for (var i = 0; i <= score; i++)
{
    for (var j = 0; j <= i; j++)
    {
        var stsc = '<img src="./images/star.png"/>';
    }
}

The aim is to get the variable stsc to show the number of stars depending on the count of the score variable.

Currently, it will only show 1 star no matter what the value of score is. I have tried adding stsc outside of the nested loop to no avail. No matter what I do it will show nothing other than 1 star.

Could you point me in the right direction as to how to get it to show the correct number of stars (3 stars if score is 3, 0 stars if score is 0 etc...)

Thanks everyone

I was just wondering if I could get some guidance on an issue I am having with nested for loops in javascript.

I currently have the following nested for loop in place

for (var i = 0; i <= score; i++)
{
    for (var j = 0; j <= i; j++)
    {
        var stsc = '<img src="./images/star.png"/>';
    }
}

The aim is to get the variable stsc to show the number of stars depending on the count of the score variable.

Currently, it will only show 1 star no matter what the value of score is. I have tried adding stsc outside of the nested loop to no avail. No matter what I do it will show nothing other than 1 star.

Could you point me in the right direction as to how to get it to show the correct number of stars (3 stars if score is 3, 0 stars if score is 0 etc...)

Thanks everyone

• javascript
• for-loop
• nested

• 3 Why do you need a nested for loop? Looks to me like a normal for loop from 0 to score should just do fine. Learn about string concatenation: developer.mozilla/en-US/docs/JavaScript/Guide/…. – Felix Kling Commented Feb 2, 2013 at 18:02
• I was always taught that a nested loop was needed for such situations. I tried it with just the one loop but I still only got the 1 star to display – Chris Commented Feb 2, 2013 at 18:05
• You have to add value to stsc variable. At first you have to init variable to empty string before loop: stsc = ''; Then use stsc += '<img...'; – dherbolt Commented Feb 2, 2013 at 18:07
• I assume that there's other code that you're not showing us? Because you're assigning the string to your (very local) variable stsc, over and over, and not doing anything with it. – Ann L. Commented Feb 2, 2013 at 18:08
• Hi Ann, there is a lot more code that I have. It is just this one particular issue that I am having. If I display the variable then it displays the correct number, it just wont add to the stsc variable when I want to show the correct number of stars. E.g. If I score = 3 then if I just show score or just show j then it shows 3, but will only show 1 instance of the star image – Chris Commented Feb 2, 2013 at 18:12

3 Answers 3

var stsc="";
var score=0;
for (var i = 1; i <= score; i++)
{

        stsc = stsc +'<img src="./images/star.png"/>';

}

http://jsfiddle/m5Btd/1295/

You just need a normal for loop and string concatenation:

var stsc = '';

for (var i = 0; i < score; i++) {
    stsc += '<img src="./images/star.png"/>';
}

Think about it like this: You want to create n stars, where n is the value of the score. Hence you have to repeat the process of creating the HTML string n times. That's what a for loop is doing, repeating something until a condition is fulfilled. And instead of overwriting the variable in each iteration, you have to add to it.

You don't need any for loops:

var stsc = score === 0 ? "" : new Array(score + 1).join("<img src=./images/star.png>");