如何创建随机字符串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>