如何創建隨機字符串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_