CODEWITHSUNDEEP
javascriptcoordinates
Rufus Long
Rufus Long

Reputation: 33

Which function would you use - Javascript

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.

Upvotes: 2

Views: 103

Answers (4)

Lye Fish
Lye Fish

Reputation: 2568

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!

Upvotes: 0

Michał Miszczyszyn
Michał Miszczyszyn

Reputation: 12701

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.

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386530

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>

Upvotes: 2

Mayank Shukla
Mayank Shukla

Reputation: 104369

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>

Upvotes: 2

Related Questions