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

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/…. — Felix Kling
– 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
– 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
– 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.
– 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
– Chris, Commented Feb 2, 2013 at 18:12

Vinit · Accepted Answer · 2013-02-02 18:09:12Z

3

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

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

}

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

answered Feb 2, 2013 at 18:09

Vinit

1,82517 silver badges38 bronze badges

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

2 Comments

Chris Over a year ago

Hi Vinit, out of those that I tried this did the trick. Thanks so much for your help. Thank you everyone else too

Chris Over a year ago

@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

Felix Kling · Accepted Answer · 2013-02-02 18:06:42Z

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.

answered Feb 2, 2013 at 18:06

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

3 Comments

Chris Over a year ago

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 Over a year ago

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 Over a year ago

@Chris and double check that you wrote the for loop correctly and specifically that "i" is being incremented properly.

Pointy · Accepted Answer · 2013-02-02 18:26:56Z

1

You don't need any for loops:

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

answered Feb 2, 2013 at 18:26

Pointy

415k62 gold badges600 silver badges631 bronze badges

Collectives™ on Stack Overflow

Nested for loops in javascript

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related