Wie man Spaltennummern generiert und sie in HTML mit JavaScript anzeigen

Question

Ich bin ein Neuling in JavaScript. Ich möchte einige Zahlen generieren und das ganze auf HTML-Element anzeigen.

Bellow ist der Code, den ich schrieb. Ich bekomme nur eine einzige Nummer, die auf HTML generiert wird, aber ich bekomme, was ich will auf der Konsole.

\t \t var b; 
 
\t \t function gen(){ 
 
\t \t \t for (var i = 0; i < 10; i++){ 
 
\t \t \t \t b = Math.random().toString(); 
 
\t \t \t \t console.log(b); 
 
\t \t \t \t document.getElementById('output').innerHTML = b; 
 
\t \t \t }; 
 
\t \t } 
 
\t \t

<h1>Generate Phone numbers</h1> 
 
\t \t <p> 
 
\t \t \t <input type="button" value="Generate" class="btn" onclick="gen()"> 
 
\t \t <p> 
 
\t \t <span id="output"></span>

Bitte wie bekomme ich, was genau auf der Konsole ist in HTML, wenn ich Schaltfläche erzeugen klicken?

Vielen Dank

Answer 1

können Sie insertAdjacentHTML Methode verwenden.

var b; 
 
function gen(){ 
 
for (var i = 0; i < 10; i++){ 
 
\t b = Math.random().toString(); \t \t \t 
 
\t document.getElementById('output').insertAdjacentHTML('beforeend', b); 
 
}; 
 
} 
 
    \t \t

<h1>Generate Phone numbers</h1> 
 
<p> 
 
\t <input type="button" value="Generate" class="btn" onclick="gen()"> 
 
<p> 
 
<span id="output"></span>

Answer 2

Fügen Sie eine temporäre Variable zur Außenseite der Schleife hinzu. Weisen Sie diesen Wert dann innerHTML Ihres span-Tags zu.

var phoneNumber = ""; 
 
for (var i = 0; i < 10; i++){ 
 
\t \t \t \t b = Math.random().toString(); 
 
\t \t \t \t console.log(b); 
 
\t \t \t \t phoneNumber += b; 
 
\t \t \t }; 
 
document.getElementById("output").value = phoneNumber;