How do I use a for-loop to add values to a JS variable?

Question

I have made a piece of code that generates a random code of 12 characters. I am using Math.random and for-loops to do this. On the page you can write in an input how many codes you want.

What I want to do is save the generated codes in an array, however I can't do this because the for-loop and Math.random creates the code number by number and places them after each other. How can I add the whole 12 digit code to my array (so I can use it later)?

I've tried array.push with no luck. What works is outputting the numbers to DOM object in HTML, like this:

for (i = 0; i < 12; i++) {
var mathRandom = Math.floor(Math.random() * 9); 
var result = document.querySelector("#result");
result.innerHTML += mathRandom;
}

But that doesn't put the 12 digit code into a variable. I've also tried this:

var codeNumber = "";
codeNumber += mathRandom;

But that ends up in the variable value having only 1 digit.

<input type="number" id="numberOfCodes">
<button onclick="codeGen()">Generate</button>
<div id="result"></div>




<script>

var numberOfCodes = document.querySelector("#numberOfCodes"); 
var arr = [];

function codeGen() { 
x = numberOfCodes.value; 
for (a = 0; a < x; a++) { 
generate(); 
console.log("Generated code");
 }
}


function generate() { 
for (i = 0; i < 12; i++) {
var mathRandom = Math.floor(Math.random() * 9); 
var result = document.querySelector("#result");
result.innerHTML += mathRandom;

 }
}

</script>
</div>
</body>
</html>

I expect the codes created (after some changes) to be added to the array, so that I can later use the codes on the page. Each individual 12-digit code needs to have its own place in the array.

Eriks Klotins · Answer 1 · 2019-01-09T20:59:49.693

1

This should work:

var result = [], stringResult;

for (i = 0; i < 12; i++) {
   var mathRandom = Math.floor(Math.random() * 9); 
   result.push(mathRandom);
}
stringResult = result.join(''); // concatenates all the elements
console.log(stringResult);

The problem with your code is that + sign attempts to determine types of the operands and to choose the right operation, concatenation or addition. When adding stuff to innerHtml it treats the number as string. That is why it worked.

edited Jan 09 '19 at 20:59

answered Jan 09 '19 at 16:00

Eriks Klotins

4,042
1
12
26

Alright, but what about the array? Also if I do console.log(result), or were to print it I get a bunch of separate numbers, exactly what I don't want. Correct me if I'm wrong but I think it's the result.join('') that makes it seem different. – Marcus Jan 09 '19 at 18:16
Array.join() takes the array and concatenates all the elements. See my edit – Eriks Klotins Jan 09 '19 at 20:58

score 0 · Answer 2 · answered Jan 09 '19 at 16:02

You'll want to refactor things so generating a single code is encapsulated in a single function (generate() here), then use that function's output, like this. (I hope the comments are enlightening enough.)

var numberOfCodes = document.querySelector("#numberOfCodes");
var resultDiv = document.querySelector("#result");

function codeGen() {
  var nToGenerate = parseInt(numberOfCodes.value);
  for (var a = 0; a < nToGenerate; a++) {
    var code = generate(); // generate a code

    // you could put the code in an array here!

    // for the time being, let's just put it in a new <div>
    var el = document.createElement("div");
    el.innerHTML = code;
    resultDiv.appendChild(el);
  }
}

function generate() {
  var code = "";  // define a local variable to hold the code
  for (i = 0; i < 12; i++) {  // loop 12 times...
    code += Math.floor(Math.random() * 9);  // append the digit...
  }
  return code;  // and return the value of the local variable
}

<input type="number" id="numberOfCodes" value=8>
<button onclick="codeGen()">Generate</button>
<div id="result"></div>

score 0 · Answer 3 · answered Jan 09 '19 at 16:03

As this answer shows, this should work for you:

function makeRandCode() {
  var code = "";
  var ints = "1234567890";

  for (var i = 0; i < 12; i++) {
    code += ints.charAt(Math.floor(Math.random() * ints.length));
  }

  return code;
}

console.log(makeRandCode());

score 0 · Answer 4 · answered Jan 09 '19 at 16:03

The problem is that you are adding numbers and what you really want is to concatenate them, the solution is to transform those numbers into String, then save them in the variable where you want to store them. An example: 2 + 2 = 4 and '2'+'2'='22' Just use .toString() before save it in to the variable.

How do I use a for-loop to add values to a JS variable?

4 Answers4