如何創建隨機字符串JS

Question

下面的代碼創建10個隨機字符串，其想法是將每個字符串都放在一個“ li”中。 有了我擁有的東西，我可以創建10個隨機的“ li”，但是在第二個“ li”之后，它會創建一個新字符串，但要包含先前的字符串。 有沒有辦法解決這個問題？

例如：這就是我想要得到的

弦1

弦2

弦3

.......

我當前得到的輸出是

弦1

字符串1字符串2

字符串1字符串2字符串3

.....

演示： 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> 

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 。
• 您無需在divName添加每個li ，但每次都覆蓋其全部內容。

 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> 

Answer 4

只需在打印li后添加一行-

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

Answer 5

您遇到的問題與randomName變量的范圍有關。 由於該變量是在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); 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 6

將randomName的聲明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>