create a list of passwords from password generator

Question

The current password generator is creating one password at a time when I click on the Generate button. Is it possible to create a list of different passwords by using the same function? The number of passwords, that will be created, should be decided from the Number of Passwords option at the bottom of the form.

 var CHARACTER_TABLE = [ [true, "Numbers", "0123456789"], [true, "Lowercase", "abcdefghijklmnopqrstuvwxyz"], [false, "Upercase", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"], ]; var passwordContent = document.createTextNode(""); var statisticsContent = document.createTextNode("\ "); function init() { var items = document.createDocumentFragment(); CHARACTER_TABLE.forEach(function(key, x) { var spanItem = document.createElement("span"); var inputItem = document.createElement("input"); inputItem.type = "checkbox"; inputItem.checked = key[0]; inputItem.id = "charset-" + x; spanItem.appendChild(inputItem); var labelItem = document.createElement("label"); labelItem.htmlFor = inputItem.id; labelItem.appendChild(document.createTextNode(" " + key[1] + " ")); var detailsItem = document.createElement("em"); detailsItem.appendChild(document.createTextNode("(" + key[2] + ")")); labelItem.appendChild(detailsItem); spanItem.appendChild(labelItem); items.appendChild(spanItem); items.appendChild(document.createElement("br")); }); var itemsWrapper = document.getElementById("charset-options"); itemsWrapper.insertBefore(items, itemsWrapper.firstChild); } init(); function generatePassword() { var charsetTxt = ""; CHARACTER_TABLE.forEach(function(key, x) { if (document.getElementById("charset-" + x).checked) { charsetTxt += key[2]; } }); var charsetArray = []; for (var i = 0; charsetTxt.length > i; i++) { var character = charsetTxt.charCodeAt(i); var placeholder = null; if (0xD800 > character || character >= 0xE000) { placeholder = charsetTxt.charAt(i); } else if (character >= 0xD800 ? 0xDC00 > character : false) { if (charsetTxt.length > i + 1) { var next = charsetTxt.charCodeAt(i + 1); if (next >= 0xDC00 ? 0xE000 > next : false) { placeholder = charsetTxt(i, 2); i++; } } } else if (next >= 0xDC00 ? 0xE000 > next : false) { i++; } else { throw "Assertion error"; } if (placeholder != null ? charsetArray.indexOf(placeholder) == -1 : false) { charsetArray.push(placeholder); } } var thePassword = ""; var theStatistics = ""; if (charsetArray.length == 0) { alert("Error: Character set is empty"); } else { var theLength; if (document.getElementById("select-length").checked) { theLength = parseInt(document.getElementById("length").value, 10); } else { throw "Assertion error"; } if (0 > theLength) { alert("Negative password length"); } else if (theLength > 10000) { slert("Password length too large"); } else { for (var i = 0; theLength > i; i++) { thePassword += charsetArray[randomInt(charsetArray.length)]; theStatistics = "Length = " + theLength + " chars"; } } } passwordContent.data = thePassword; statisticsContent.data = theStatistics; document.getElementById("generatedPassword").appendChild(passwordContent); document.getElementById("generatedStatistics").appendChild(statisticsContent); } var theAmount = document.getElementById("amount").value; $('#generator').on('click', function() { for(var i = 0; i < theAmount; i++) { generatePassword(); } }); function randomInt(n) { var x = randomIntMathRandom(n); x = (x + randomIntBrowserCrypto(n)) % n; return x; } function randomIntMathRandom(n) { var x = Math.floor(Math.random() * n); if (0 > x || x >= n) { throw "Arithmetic exception"; } return x; } var cryptoObject = null; function randomIntBrowserCrypto(n) { if (cryptoObject == null) { return 0; } var x = new Uint32Array(1); do cryptoObject.getRandomValues(x); while (x[0] - x[0] % n > 4294967296 - n); return x[0] % n; } 

 #generator { display: inline-block; color: #444; border: 1px solid #CCC; background: #DDD; box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2); cursor: pointer; vertical-align: middle; max-width: 100px; padding: 5px; text-align: center; } #generator:active { color: red; box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <p id="charset-options"> </p> <div class="section"> <div> <table> <tbody> <tr> <td> <input type="hidden" name="type" id="select-length" checked="checked"> <label for="select-length">Length:&#xA0;</label> </td> <td> <input type="number" min="0" value="10" step="1" id="length" style="width:4em"> characters</td> </tr> <tr> <td> <input type="hidden" name="amount" id="select-amount"> <label for="select-amount">Number of Passwords:&#xA0;</label> </td> <td> <input type="number" min="0" value="1" step="1" id="amount" style="width:4em"> </td> </tr> </tbody> </table> </div> </div> <br> <div id="generator" style="padding:0.5em 0.5em">Generate</div>: <span id="generatedPassword"></span> <p id="generatedStatistics"></p> </form> 

Here is my failed attempt to solve the problem with a for loop:

    var theAmount = document.getElementById("amount").value;
    $('#generator').on('click', function() {
    for(var i = 0; i < theAmount; i++) {
    generatePassword();
     }
   });

Answer 1

Your code is working perfectly fine, except that you need to make one change:

Swap the below lines. They are always giving you value as 1:

var theAmount = document.getElementById("amount").value; $('#generator').on('click', function() {

Make them as below. They will give you value selected/entered in the field:

$('#generator').on('click', function() { var theAmount = document.getElementById("amount").value;

Here is the updated working code for you:

 var CHARACTER_TABLE = [ [true, "Numbers", "0123456789"], [true, "Lowercase", "abcdefghijklmnopqrstuvwxyz"], [false, "Upercase", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"], ]; var passwordContent = document.createTextNode(""); var statisticsContent = document.createTextNode("\ "); function init() { var items = document.createDocumentFragment(); CHARACTER_TABLE.forEach(function(key, x) { var spanItem = document.createElement("span"); var inputItem = document.createElement("input"); inputItem.type = "checkbox"; inputItem.checked = key[0]; inputItem.id = "charset-" + x; spanItem.appendChild(inputItem); var labelItem = document.createElement("label"); labelItem.htmlFor = inputItem.id; labelItem.appendChild(document.createTextNode(" " + key[1] + " ")); var detailsItem = document.createElement("em"); detailsItem.appendChild(document.createTextNode("(" + key[2] + ")")); labelItem.appendChild(detailsItem); spanItem.appendChild(labelItem); items.appendChild(spanItem); items.appendChild(document.createElement("br")); }); var itemsWrapper = document.getElementById("charset-options"); itemsWrapper.insertBefore(items, itemsWrapper.firstChild); } init(); function generatePassword() { var charsetTxt = ""; CHARACTER_TABLE.forEach(function(key, x) { if (document.getElementById("charset-" + x).checked) { charsetTxt += key[2]; } }); var charsetArray = []; for (var i = 0; charsetTxt.length > i; i++) { var character = charsetTxt.charCodeAt(i); var placeholder = null; if (0xD800 > character || character >= 0xE000) { placeholder = charsetTxt.charAt(i); } else if (character >= 0xD800 ? 0xDC00 > character : false) { if (charsetTxt.length > i + 1) { var next = charsetTxt.charCodeAt(i + 1); if (next >= 0xDC00 ? 0xE000 > next : false) { placeholder = charsetTxt(i, 2); i++; } } } else if (next >= 0xDC00 ? 0xE000 > next : false) { i++; } else { throw "Assertion error"; } if (placeholder != null ? charsetArray.indexOf(placeholder) == -1 : false) { charsetArray.push(placeholder); } } var thePassword = ""; var theStatistics = ""; if (charsetArray.length == 0) { alert("Error: Character set is empty"); } else { var theLength; if (document.getElementById("select-length").checked) { theLength = parseInt(document.getElementById("length").value, 10); } else { throw "Assertion error"; } if (0 > theLength) { alert("Negative password length"); } else if (theLength > 10000) { slert("Password length too large"); } else { for (var i = 0; theLength > i; i++) { thePassword += charsetArray[randomInt(charsetArray.length)]; theStatistics = "Length = " + theLength + " chars"; } } } passwordContent.data = thePassword; statisticsContent.data = theStatistics; var d1 = document.getElementById('generatedPassword'); d1.insertAdjacentHTML('beforeend', passwordContent.data + "<br />"); // document.getElementById("generatedPassword").appendChild(passwordContent); document.getElementById("generatedStatistics").appendChild(statisticsContent); } $('#generator').on('click', function() { var theAmount = document.getElementById("amount").value; for (var i = 0; i < theAmount; i++) { generatePassword(); } }); function randomInt(n) { var x = randomIntMathRandom(n); x = (x + randomIntBrowserCrypto(n)) % n; return x; } function randomIntMathRandom(n) { var x = Math.floor(Math.random() * n); if (0 > x || x >= n) { throw "Arithmetic exception"; } return x; } var cryptoObject = null; function randomIntBrowserCrypto(n) { if (cryptoObject == null) { return 0; } var x = new Uint32Array(1); do cryptoObject.getRandomValues(x); while (x[0] - x[0] % n > 4294967296 - n); return x[0] % n; } 

 #generator { display: inline-block; color: #444; border: 1px solid #CCC; background: #DDD; box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.2); cursor: pointer; vertical-align: middle; max-width: 100px; padding: 5px; text-align: center; } #generator:active { color: red; box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <p id="charset-options"> </p> <div class="section"> <div> <table> <tbody> <tr> <td> <input type="hidden" name="type" id="select-length" checked="checked"> <label for="select-length">Length:&#xA0;</label> </td> <td> <input type="number" min="0" value="10" step="1" id="length" style="width:4em"> characters</td> </tr> <tr> <td> <input type="hidden" name="amount" id="select-amount"> <label for="select-amount">Number of Passwords:&#xA0;</label> </td> <td> <input type="number" min="0" value="1" step="1" id="amount" style="width:4em"> </td> </tr> </tbody> </table> </div> </div> <br> <div id="generator" style="padding:0.5em 0.5em">Generate</div>: <span id="generatedPassword"></span> <p id="generatedStatistics"></p> </form> 

Answer 2

I made a jsfiddle https://jsfiddle.net/b38x9vp4/
So I add a new password text node to your #generatedPassword element. everytime you call generatePassword()

document.getElementById("generatedPassword").appendChild(document.createTextNode(thePassword));
document.getElementById("generatedPassword").appendChild(document.createElement("br"));
document.getElementById("generatedStatistics").appendChild(statisticsContent);

I think removing previous passwords generated would be nice in your program. And you need to put var theAmount = document.getElementById("amount").value; inside the click listener.

$('#generator').on('click', function() {
    var theAmount = document.getElementById("amount").value;
    //remove previous passwords from generatedPassword element
      var myNode = document.getElementById("generatedPassword");
      while (myNode.firstChild) {
          myNode.removeChild(myNode.firstChild);
      }
    //remove previous passwords from generatedPassword element
    for(var i = 0; i < theAmount; i++) {
        generatePassword();
    }
});

Answer 3

I think you're trying to take the value, which you've set in HTML (value="1"). Try to set theAmount variable inside generator click function, too.