Was ist der beste Weg, um nach jedem window.document.writeln einen Zeilenumbruch hinzuzufügen?

Ich dachte, die Verwendung von .writeln im Gegensatz zu .write würde den Trick machen, aber es wurde nur ein Leerzeichen hinzugefügt.

for (var fizzCount = 1; fizzCount<=100; ++fizzCount) {
    if (fizzCount % 3 == 0)
        window.document.writeln("Fizz");
    else if (fizzCount % 5 == 0)
        window.document.writeln("Buzz");
    else if (fizzCount % 15 == 0)
        window.document.writeln("FizzBuzz");
    else 
        window.document.writeln(fizzCount);
}   

https://jsfiddle.net/eyLarL23/1/

Danke für die Hilfe!

1
Jenny 31 Dez. 2015 im 20:25

3 Antworten

Beste Antwort

Ich erinnere mich an diese Codecademy-Lektion ☺.

Fügen Sie einfach eine hinzu

+ "<br />"

Zu jeder Ihrer writeln() Anweisungen.

Ihr Code funktioniert nicht, da writeln() einen \n Zeilenumbruch anstelle eines <br /> erstellt und daher nicht als Zeilenumbruch dargestellt wird.

Beispielsweise:

for (var fizzCount = 1; fizzCount<=100; ++fizzCount) {
if (fizzCount % 3 == 0)
window.document.writeln("Fizz<br />");
else if (fizzCount % 5 == 0)
window.document.writeln("Buzz<br />");
else if (fizzCount % 15 == 0)
window.document.writeln("FizzBuzz<br />");

Siehe aktualisiertes JSFiddle.

Extra-Tipp 1

Da Sie bereits jQuery verwenden, können Sie Ihre window.document.writeln() -Anweisungen auf kürzere jQuery-Anweisungen wie folgt vereinfachen:

var d = $("body");
for (var fizzCount = 1; fizzCount<=100; ++fizzCount)
    if (fizzCount % 3 == 0)
        d.append("Fizz<br />");
    else if (fizzCount % 5 == 0)
        d.append("Buzz<br />");
    else if (fizzCount % 15 == 0)
        d.append("FizzBuzz<br />");

Extra-Tipp 2

Ihr Code druckt "FizzBuzz" nicht mit einem Vielfachen von 15 aus. Stattdessen druckt er nur "Fizz" aus, da er zuerst auf die Anweisung if(fizzCount % 3 == 0) trifft. Um dies zu beheben, setzen Sie die Anweisung if(fizzCount % 15 == 0) an die erste Stelle, damit sie zuerst überprüft wird.

Daher wäre der endgültige (Arbeits-) Code:

var d = $("body");
for (var fizzCount = 1; fizzCount<=100; ++fizzCount)
    if (fizzCount % 15 == 0)
        d.append("FizzBuzz<br />");
    else if (fizzCount % 3 == 0)
        d.append("Fizz<br />");
    else if (fizzCount % 5 == 0)
        d.append("Buzz<br />");
    else
        d.append(fizzCount + "<br />");

Siehe Arbeitsbeispiel unter JSFiddle.

3
Jonathan Lam 31 Dez. 2015 im 17:57

Mit <pre> Tag einschließen. Sie werden das wahre Verhalten sehen.

    document.write('<pre>');
    for (var fizzCount = 1; fizzCount<=100; ++fizzCount) {
        if (fizzCount % 3 == 0)
            window.document.writeln("Fizz");
        else if (fizzCount % 5 == 0)
            window.document.writeln("Buzz");
        else if (fizzCount % 15 == 0)
            window.document.writeln("FizzBuzz");
        else 
            window.document.writeln(fizzCount);
    };
    document.write('</pre>');

Geigen-URL:
https://jsfiddle.net/eyLarL23/3/

1
Venkat.R 31 Dez. 2015 im 17:37

Document.writeln fügt bereits einen Zeilenumbruch hinzu. Sie sehen es nicht, weil das Standardverhalten darin besteht, Leerzeichen zu verschlucken / zu coalleszieren.

Wenn Sie die generierte Quelle der Seite anzeigen, wird auf diesem Textknoten eine neue Zeile angezeigt.

Wenn Sie eine neue Zeile auf Ihrer Seite sehen möchten, verwenden Sie ein br-Tag

window.document.writeln("Fizz" + "<br />");
0
Juan Mendes 31 Dez. 2015 im 17:30