Is it possible to work with 2 variables in a "for loop"?

Question

For example:

var totalImages = 45;

function GalleryGrid(limit) {
    for (var i = totalImages; i > totalImages - limit; i--) {
        $('.grid').append('<div class="entry"><img src="photo-' + i + '.jpg"><img src="symbol-' + n + '.svg"></div>');
    }
}

GalleryGrid(totalImages);

In this example, we have 2 variables "i" and "n".

var i needs to give me numbers from 1 to 45 (solved, already working). var n needs to give me 2 types of letters, "a" or "b" (random).

Any ideas about how to make "n" be randomly and "a" or "b"?

// Desired output:
<div class="entry"><img src="photo-1.jpg"><img src="symbol-a.svg"></div>
<div class="entry"><img src="photo-2.jpg"><img src="symbol-b.svg"></div>
<div class="entry"><img src="photo-3.jpg"><img src="symbol-b.svg"></div>
<div class="entry"><img src="photo-4.jpg"><img src="symbol-a.svg"></div>

Possible duplicate of [Getting a random value from a JavaScript array](https://stackoverflow.com/questions/4550505/getting-a-random-value-from-a-javascript-array) — Madhawa Priyashantha, Oct 21 '17 at 08:43
Possible duplicate of [How to decide between two numbers randomly using javascript?](https://stackoverflow.com/questions/9730966/how-to-decide-between-two-numbers-randomly-using-javascript) — Sebastian Simon, Oct 21 '17 at 08:44

score 1 · Accepted Answer · answered Oct 21 '17 at 08:48

Try this:

function GalleryGrid(limit) {
    for (var i = totalImages; i > totalImages - limit; i--) {
        var n = String.fromCharCode(97 + Math.floor(Math.random() * 2));
        $('.grid').append('<div class="entry"><img src="photo-' + i + '.jpg"><img src="symbol-' + n + '.svg"></div>');
    }
}

Ori Drori · Answer 2 · 2017-10-21T08:54:50.380

Use an array of options with Math#random:

var totalImages = 45;
var $grid = $('.grid');

function GalleryGrid(limit) {
  var options = ['a', 'b'];
  var n;
  for (var i = totalImages; i > totalImages - limit; i--) {
    n = options[Math.floor(Math.random() * 2)];
    $grid.append('<div class="entry"><img src="photo-' + i + '.jpg"><img src="symbol-' + n + '.svg"></div>');
  }
}

GalleryGrid(totalImages);

img {
  width: 20px;
  height: 20px;
}

img[src$="a.svg"] {
  background: red;
}

img[src$="b.svg"] {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid"></div>

Is it possible to work with 2 variables in a "for loop"?

Any ideas about how to make "n" be randomly and "a" or "b"?

2 Answers2