Which function would you use - Javascript

Question

I'm new to javascript and I have the following code:

<p id="demo"></p>

<script>
    var text = "";
    var x = 1;
    var y = 1;
    while(x < 9) {
       text += "<br>" + x +"," + y;
       x++;
    }
    document.getElementById("demo").innerHTML = text;
</script>

It prints out a list of coordinates:

1,1
2,1
3,1
4,1
5,1
6,1
7,1
8,1

The question is once it gets to 8,1 What would you use to get it to continue to:

1,2
2,2
3,2
4,2
5,2
6,2
7,2
8,2

then 1,3 and so on until it reaches 3,4 (this could be variable) then it stops.

In an ideal world I would be able to get it to go up to a maximum of 8,12.

You probably need a second loop encapsulating the other loop. Just think about it, should be pretty easy to come up with. — mason
– mason, Commented Feb 12, 2017 at 14:38

Nina Scholz · Accepted Answer · 2017-02-12 14:43:55Z

2

You could use another while structure for the seconde value.

var text = "",
    x,
    y = 1;

while (y <= 12) {
    x = 1;
    while (x <= 8) {
        text += "<br>" + x + "," + y;
        x++;
    }
    y++;
}
document.getElementById("demo").innerHTML = text;

<p id="demo"></p>

Or you could use a for statement

The for statement creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement (usually a block statement) to be executed in the loop.

var text = "",
    x,
    y;

for (y = 1; y <= 12; y++) {
    for (x = 1; x <= 8; x++) {
        text += "<br>" + x + "," + y;
    }
}

document.getElementById("demo").innerHTML = text;

<p id="demo"></p>

edited Feb 12, 2017 at 14:43

answered Feb 12, 2017 at 14:39

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

8 Comments

Michał Miszczyszyn Over a year ago

Why would you complicate it like that, instead of simply using the for loop?

Nina Scholz Over a year ago

@MichałMiszczyszyn, i kept the spirit of the while loop for the answer.

Michał Miszczyszyn Over a year ago

The spirit of bad practices? 👎

Nina Scholz Over a year ago

no. while is a good choice. you may not like it, but it is a structure which works well.

Nina Scholz Over a year ago

@MichałMiszczyszyn, i have a different view. both works, but op has worked with while.

|

Mayank Shukla · Accepted Answer · 2017-02-12 14:43:41Z

2

Write it like this:

var text = "", x,y;
    
for (y=1; y<= 12; y++) {
  for (x=1; x<= 8; x++) {
    text += "<br>" + x + "," + y;
  }
}
document.getElementById("demo").innerHTML = text;

 <p id="demo"></p>

answered Feb 12, 2017 at 14:43

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Comments

Michał Miszczyszyn · Accepted Answer · 2017-02-12 14:44:25Z

0

You can nest loops. The best solution here is to use two nested for loops:

let text = '';
for (let y = 1; y <= 12; ++y) {
    for (let x = 1; x <= 8; ++x) {
        text += "<br>" + x + "," + y;
    }
}
document.getElementById("demo").innerHTML = text;

<output id="demo"></output>

As you can see, it stops at 8,12, exactly like you wanted :)

You can find more about different types of loops and iteration on MDN.

answered Feb 12, 2017 at 14:44

Michał Miszczyszyn

12.8k2 gold badges38 silver badges53 bronze badges

Comments

Lye Fish · Accepted Answer · 2017-02-13 17:08:01Z

Here is a fun solution. It is not what I would do but for educational purposes, so take it for what it is.

It uses Array.prototype.reduce on inner and outer arrays. The accumulated result of the inner array on each iteration gets added to the accumulator of the outer array. The inner reduce is where all the actual data is added. The outer reduce just accumulates the inner results.

It uses some ECMAScript 2015 features also like the spread syntax and arrow functions.

str = [...Array(12)].reduce((s, _, i) =>
        s + [...Array(8)].reduce((ss, _, j) =>
              ss + (j + 1) + ',' + (i + 1) + "\n", ""),
      "");

console.log(str);

I used "\n" instead of "<br>" so that it shows up in console.

Don't actually use this. Its just to show different way. I would use a nested loop in practice.

Have fun!

Collectives™ on Stack Overflow

Which function would you use - Javascript

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related