如何创建随机字符串JS

Question

下面的代码会创建10个随机字符串，其目的是让每个字符串都包含在＆＃39; li＆＃39;中。凭借我所拥有的，我能够创造10个随机的＆＃39; li＆＃39;但是在第二个＆＃39; li＆＃39;之后。它是一个新的字符串，但前一个字符串。有没有办法来解决这个问题？

Ex：这就是我想要的

字符串1

String 2

字符串3

.......

我目前获得的输出是

字符串1

String 1String 2

String 1String 2String 3

.....

演示：https://jsfiddle.net/73cmb11q/

＆＃13;

＆＃13;

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>';
	}

	
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

每次追加li后，你都可以将字符串重置为“”，这样下次就会形成一个新的字符串，你需要使用+ =，同时将innerHTML添加到div中，否则你将只有一个列表，因为你一直在替换以前的。

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>

Answer 2

在第一次var randomName = '';循环后添加for，它会在生成新的随机字符串之前重置之前的值

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>

Answer 3

我看到两个错误：

• 每次你都不要重置randomName。
• 您不会在li中添加每个divName，但每次都会覆盖其全部内容。

＆＃13;

＆＃13;

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>'; 
	  }
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

打印li后只需添加一行 -

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

Answer 5

您遇到的问题与randomName变量的scope有关。由于该变量在for循环之外初始化，因此每次向其添加子字符串时，您实际上都会将其附加到之前的字符串中。要在当前代码中修复此问题，您只需将randomName移至第一个循环中即可。

此外，您要创建两次randomLength变量（一次在循环外，然后在循环的每次迭代中）。由于变量仅用于生成随机长度字符串，因此可以安全地删除外部变量。

＆＃13;

＆＃13;

 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>';
  }
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

我已经更新了您的fiddle。

Answer 6

将randomName的声明移到第一个for循环中。它未在声明的范围内使用，每次生成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>