Add array values without clearing previous value using javascript

Question

I have a password generator which works fine. But need a little change. The below image shows

Once I click the "Generate Password" button it generates one password. Required: When I click the button again, I need to have another password generated below without clearing the previous one. Tried a couple of variations in loop but did not work.

**passGen.js**

function passGen() {
var Generator = {};
Generator.generateMnemonic = function(length, num_length, mixcase) {
var ret = '';
var vowels = 'aeioe';
var consonants = 'bcdfghklmnpqrstvwxzy';
if (mixcase) {
    vowels += vowels.toUpperCase();
    consonants += consonants.toUpperCase();
}
vowels = vowels.split('');
consonants = consonants.split('');

for(var i = 0; i < length / 2; i++) {
    ret += vowels.getRandom();
    ret += consonants.getRandom();
}

if (!num_length) return ret;

var pos = $random(2, length - 2 - num_length);
return ret.substr(0, pos) + $random(Math.pow(10, num_length - 1),    Math.pow(10, num_length) - 1) + ret.substr(pos + num_length);
    };
    var observe = new Observer('#generator-length, #generator-num_length,  #generator-mixcase, #generator-amount', function(values) {
    var length = values[0].toInt();
    var num_length = values[1].toInt();
    var mixcase = values[2].toInt();
    var amount = values[3].toInt();

    // Fill passwords in a loop
    var words = [];
    for (var i = 0; i < amount; i++) {
        words.push(Generator.generateMnemonic(length, num_length, mixcase)   );

    }

    // Get the output area
    var output = $('generator-output');

    // Output it and highlight it so users will notice the update
    output.value = words.join("\n");
    output.getParent().highlight('#ff8', '#fff');


   }, {
   //   periodical: 1000 // interval in ms
   });

   // To fill in the first values
   observe.fire();
   }
   **Part of Hmtl**
 <script type="text/javascript" src="passGen.js"></script> 
<span>How many passwords:</span>
    <br>
    <select name="amount" id="generator-amount">
        <option value="1" selected>1</option>
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="50">50</option>
        <option value="100">100</option>
    </select>
</label>
<input type="button" name="button" value="Generate Password" onclick="passGen();">
<label>
<br>
    <span>Your passwords:</span>

Could you please post a live example? – Andrew Li Sep 09 '16 at 00:51 — Andrew Li, Sep 09 '16 at 00:51
Can you create a jsfiddle for the same? – xCodeZone Sep 09 '16 at 00:53 — xCodeZone, Sep 09 '16 at 00:53

score 0 · Answer 1 · edited May 23 '17 at 10:29

Do something along these lines: (small example to give the feel) with a static variable.

function passGen() {
 if ( typeof passGen.words == 'undefined' ) { /* It has not been called do initialization*/
 passGen.words = [];}//else previous passwords persist, and you push, onto them.
 passGen.words.push("Hello");
 alert(passGen.words);
}
passGen();
passGen();

In your case keep my initial if, remove your line

var words = [];

and prepend passGen. to your words.push and words.join

adapted from Static variables in JavaScript

Add array values without clearing previous value using javascript

1 Answers1