從密碼生成器創建密碼列表

Question

當我單擊“生成”按鈕時，當前的密碼生成器一次創建一個密碼。 是否可以使用相同的功能創建不同密碼的列表？ 應創建的密碼數量應由表格底部的“密碼數量”選項決定。

 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> 

這是我用for循環解決問題的失敗嘗試：

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

Answer 1

您的代碼運行正常，只是您需要進行以下更改：

交換以下幾行。 他們始終為您提供價值：1：

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

使其如下所示。 他們將為您提供在字段中選擇/輸入的值：

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

這是為您更新的工作代碼：

 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

我做了一個jsfiddle https://jsfiddle.net/b38x9vp4/
因此，我將一個新的密碼文本節點添加到您的#generatedPassword元素中。 每次調用generatePassword()

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

我認為刪除以前生成的密碼在您的程序中會很好。 並且您需要將var theAmount = document.getElementById("amount").value; 在點擊監聽器中。

$('#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

我認為您正在嘗試采用在HTML中設置的值（值=​​“ 1”）。 也嘗試在生成器click函數中設置theAmount變量。