How to create random strings JS

Question

The code below create 10 random strings, the idea is to have each string in a 'li'. With what I have, I able to create 10 random 'li', but after the sencond 'li' its a new string but with previous one. Is there a way to fix this?

Ex: This is what I trying to get

String 1

String 2

String 3

.......

The output that im currently getting is

String 1

String 1String 2

String 1String 2String 3

.....

Demo: https://jsfiddle.net/73cmb11q/

function names()
{
	var txt = "abcdefghiklmnopqrstuvwxyz";
	var name_length = 8;
	var randomName = '';
    
    var randomLength = Math.trunc(Math.random() * (8 - 4) + 4); 
    console.log(randomLength);

    for(var j=0; j<10; j++)
    {
    	var randomLength = Math.trunc(Math.random() * (8 - 4) + 4); 
    	for(var i=0; i<randomLength; i++)
		{
			var rname = Math.floor(Math.random() * txt.length);
			randomName += txt.substring(rname, rname+1);
		} 
		var divName = document.getElementById('names');
	    divName.innerHTML += '<li>' + randomName + '</li>';
	}

	
}

<form name="randomform">
  <input type="button" value="Create" onClick="names()">
  <input type="text" name="randomfield">
</form>

<ul id="names">
</ul>

but after the sencond 'li' its a new string but with previous one can you explain what this means and maybe give an example of what you want? — H77
– H77, Commented Jul 30, 2017 at 4:09
Moving the randomName variable declaration inside the first for loop should fix it. — H77
– H77, Commented Jul 30, 2017 at 4:17

Dij · Accepted Answer · 2017-07-30 04:15:29Z

you can reset the string to "" each time after you append an li, so a new string is formed next time and you need to use += while adding innerHTML to your div otherwise you will have only one list as you keep replacing the previous ones.

function names()
{
	var txt = "abcdefghiklmnopqrstuvwxyz";
	var name_length = 8;
	var randomName = '';
    
    var randomLength = Math.trunc(Math.random() * (8 - 4) + 4); 
    console.log(randomLength);

    for(var j=0; j<10; j++)
    {
    	var randomLength = Math.trunc(Math.random() * (8 - 4) + 4); 
    	for(var i=0; i<randomLength; i++)
		{
			var rname = Math.floor(Math.random() * txt.length);
			randomName += txt.substring(rname, rname+1);
		} 
		var divName = document.getElementById('names');
	    divName.innerHTML += '<li>' + randomName + '</li>';
                    randomName = "";
	}

	
}

<form name="randomform">
  <input type="button" value="Create" onClick="names()">
  <input type="text" name="randomfield">
</form>

<ul id="names">
</ul>

A l w a y s S u n n y · Accepted Answer · 2017-07-30 04:14:11Z

Just add var randomName = ''; after you first for loop, it will reset the previous value before generating new random string

function names()
{
	var txt = "abcdefghiklmnopqrstuvwxyz";
	var name_length = 8;
	var randomName = '';
    
    var randomLength = Math.trunc(Math.random() * (8 - 4) + 4); 
    console.log(randomLength);

    for(var j=0; j<10; j++)
    {
        var randomName = '';
    	var randomLength = Math.trunc(Math.random() * (8 - 4) + 4); 
    	for(var i=0; i<randomLength; i++)
		{
			var rname = Math.floor(Math.random() * txt.length);
			randomName += txt.substring(rname, rname+1);
		} 
		var divName = document.getElementById('names');
	    divName.innerHTML += '<li>' + randomName + '</li>';
	}

	
}

<form name="randomform">
  <input type="button" value="Create" onClick="names()">
  <input type="text" name="randomfield">
</form>

<ul id="names">
</ul>

Gaël Barbin · Accepted Answer · 2017-07-30 04:15:53Z

I see two mistakes:

you do not reset randomName each time you should do.
you do not add each li in divName, but overwrite its whole content each time.

document.querySelector("#createButton").addEventListener("click",names);

function names()
{
	var txt = "abcdefghiklmnopqrstuvwxyz";
	var name_length = 8;
	var randomName = '';
    
    var randomLength = Math.trunc(Math.random() * (8 - 4) + 4); 
    console.log(randomLength);

    for(var j=0; j<10; j++)
    {
    	var randomLength = Math.trunc(Math.random() * (8 - 4) + 4); 
        randomName= ""; //randomName have to be reset before create a new name
    	for(var i=0; i<randomLength; i++)
			{
				var rname = Math.floor(Math.random() * txt.length);
				randomName += txt.substring(rname, rname+1);
			} 
			var divName = document.getElementById('names');

            // instead of =, += allow you to add randomName to the divName content instead of replacing it.
     	    divName.innerHTML += '<li>' + randomName + '</li>'; 
	  }
}

<form name="randomform">
  <input type="button" value="Create" id="createButton">
  <input type="text" name="randomfield">
</form>

<ul id="names">
</ul>

Mahfuzur Rahman · Accepted Answer · 2017-07-30 04:20:33Z

1

Just add one line after print the li -

divName.innerHTML += '<li>' + randomName + '</li>';
randomName = "";

answered Jul 30, 2017 at 4:20

Mahfuzur Rahman

1,55520 silver badges25 bronze badges

Comments

Matt Jenkins · Accepted Answer · 2017-07-30 04:26:41Z

The issue that you're running into has to do with the scope of your randomName variable. Since that variable is initialized outside of your for loops, each time you add a substring to it, you're actually appending it to your previous string. To fix this in your current code, you can just move randomName into your first loop.

Also, you're creating your randomLength variable twice (once outside the loop and then on every iteration of your loop). Since the variable is only used to generate a random length string, you can safely remove the outer variable.

 function names() {
  var txt = "abcdefghiklmnopqrstuvwxyz";
  var name_length = 8;

  for(var j=0; j<10; j++) {
    var randomName = '';
    var randomLength = Math.trunc(Math.random() * (8 - 4) + 4);
  
	for(var i=0; i<randomLength; i++) {
	  var rname = Math.floor(Math.random() * txt.length);
	  randomName += txt.substring(rname, rname+1);
    } 
  
    var divName = document.getElementById('names');
    divName.innerHTML += '<li>' + randomName + '</li>';
  }
}

<form name="randomform">
  <input type="button" value="Create" onClick="names()">
  <input type="text" name="randomfield">
</form>

<ul id="names">
</ul>

I've updated your fiddle as well.

H77 · Accepted Answer · 2017-07-30 04:31:40Z

Move the declaration of randomName into the first for loop. It's not used in the scope it is declared and needs to be reset each time you generate an li.

function names() {
  var txt = "abcdefghiklmnopqrstuvwxyz";
  var name_length = 8;
  
  for (var j = 0; j < 10; j++) {
    var randomName = '';
    var randomLength = Math.trunc(Math.random() * (8 - 4) + 4);

    for (var i = 0; i < randomLength; i++) {
      var rname = Math.floor(Math.random() * txt.length);
      randomName += txt.substring(rname, rname + 1);
    }

    var divName = document.getElementById('names');
    divName.innerHTML += '<li>' + randomName + '</li>';
  }

}

<form name="randomform">
  <input type="button" value="Create" onClick="names()">
  <input type="text" name="randomfield">
</form>

<ul id="names">
</ul>

Collectives™ on Stack Overflow

How to create random strings JS

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related