Nested for loops in javascript

Question

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

• Felix Kling: 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.org/en-US/docs/JavaScript/Guide/….
• Chris: 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
• dherbolt: 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...'
• Ann L.: 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.
• Chris: 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

Answer 1

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

http://jsfiddle.net/m5Btd/1295/

• Chris: Hi Vinit, out of those that I tried this did the trick. Thanks so much for your help. Thank you everyone else too
• Chris: @felix: it is strange. If I tried it with the += it would stop the rest of the code executing. Really strange since I can use += for integer variables. Thanks for your answers though

Answer 2

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.

• Chris: Hi Felix, when I try this it stops the rest of the code from displaying. I am using jQuery to display the results and this stops the whole script dead in its tracks
• Felix Kling: Since I don't know the rest of your code, there is not much I can help you with. You could create a jsfiddle.net demo. Make sure score is defined. Have a look at the console for errors.
• Pointy: @Chris and double check that you wrote the for loop correctly and specifically that "i" is being incremented properly.

Answer 3

You don't need any for loops:

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