如何创建随机字符串JS

Question

下面的代码创建10个随机字符串，想法是让每个字符串都在'li'中。用我所拥有的，我可以创建10个随机'li'，但是在第二个'li'之后它是一个新的字符串，但是具有前一个字符串。有没有办法来解决这个问题？

例：这是我试图让

串1个

字符串2

串3

.......

的，即时通讯输出目前得到的是

字符串1

字符串1String 2

字符串1String 2String 3

.....

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

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

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

 
\t 
 
}

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

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

Answer 1

您可以将字符串重置“”每次追加一个li，所以下一次会形成一个新的字符串，并且您需要在向div中添加innerHTML时使用+ =，否则在继续替换之前只会有一个列表。

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

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

 
\t 
 
}

<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() 
 
{ 
 
\t var txt = "abcdefghiklmnopqrstuvwxyz"; 
 
\t var name_length = 8; 
 
\t var randomName = ''; 
 
    
 
    var randomLength = Math.trunc(Math.random() * (8 - 4) + 4); 
 
    console.log(randomLength); 
 

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

 
\t 
 
}

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

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

Answer 3

之前重置以前的值我看到两个错误：

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

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

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

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

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

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

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

Answer 4

移动的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>

Answer 5

只需添加一行打印后的李 -

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

Answer 6

你正在运行到与您randomName变量的scope做的问题。由于该变量的初始化以外的for循环，每次添加一个字符串到它的时候，你实际上将其追加到以前的字符串。为了解决这个问题，你可以将randomName移到你的第一个循环中。

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

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); 
 
    
 
\t for(var i=0; i<randomLength; i++) { 
 
\t var rname = Math.floor(Math.random() * txt.length); 
 
\t 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>

我已经更新了你的fiddle为好。后sencond“礼”的一个新的字符串，但与以前的one_