So erstellen Sie zufällige Strings JS

Question

Der folgende Code erstellt 10 zufällige Zeichenfolgen, die Idee ist, jede Zeichenfolge in einem 'li' zu haben. Mit dem, was ich habe, kann ich 10 zufällige "li" erstellen, aber nach dem zweiten "li" ist es ein neuer String, aber mit dem vorherigen. Gibt es eine Möglichkeit, das zu beheben?

Ex: Das ist, was ich

String 1

String 2

String 3

.......

Die Ausgabe zu erhalten versuchen, die im, derzeit erhalten ist

String 1

String 1String 2

String 1String 2String 3

.....

Demo: 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

Sie die Zeichenfolge zurücksetzen zu "" jedes Mal nach dem Anfügen eines li, so dass beim nächsten Mal ein neuer String gebildet wird und du + = verwenden musst, während du innerHTML zu deinem div hinzufügst, ansonsten wirst du nur eine Liste haben, da du die vorherigen ersetzen wirst.

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

Fügen Sie einfach var randomName = ''; nach dem ersten for Schleife, wird es den vorherigen Wert zurückgesetzt, bevor neue zufällige Zeichenfolge zu erzeugen

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

ich zwei Fehler sehen :

• Sie nicht randomName jedes Mal, wenn Sie tun sollten.
• Sie nicht jede li in divName hinzufügen, aber überschreiben Sie den gesamten Inhalt jedes Mal.

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

die Deklaration von randomName in der for-Schleife ersten Schritt. Es wird nicht in dem angegebenen Gültigkeitsbereich verwendet und muss jedes Mal zurückgesetzt werden, wenn Sie eine li generieren.

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

Fügen Sie einfach eine Zeile nach dem Druck des li -

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

Answer 6

Das Problem, das Sie laufen in der scope Ihrer randomName Variable zu tun hat. Da diese Variable außerhalb Ihrer for-Schleifen initialisiert wird, hängt sie jedes Mal, wenn Sie eine Teilzeichenfolge hinzufügen, an die vorherige Zeichenfolge an. Um dies in Ihrem aktuellen Code zu beheben, können Sie einfach randomName in Ihre erste Schleife verschieben.

Außerdem erstellen Sie Ihre randomLength Variable zweimal (einmal außerhalb der Schleife und dann bei jeder Iteration Ihrer Schleife). Da die Variable nur zum Generieren einer Zeichenfolge mit zufälliger Länge verwendet wird, können Sie die äußere Variable sicher entfernen.

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>

Ich habe Ihre fiddle ebenfalls aktualisiert.