Entwerfen eines Schachbretts in JavaScript

Ich möchte ein Schachbrett in JavaScript drucken. Aber die Ausgabe ist nicht so, wie sie benötigt wird. Die Konsole druckt jedoch korrekt. Aber die Ausgabe in der Webseite ist anders.Entwerfen eines Schachbretts in JavaScript

Meine andere Frage ist, warum kann ich nicht "\ n" verwenden, um eine neue Zeile in der Webseite über JavaScript-Code hinzuzufügen? Javascript versteht \ n als neue Zeile und HTML als <br />. Was soll ich in JavaScript verwenden?

var chessBoard = function (length, black) { 
 
    var result = ""; 
 
    for (var line = 1; line <= length; line++) { 
 
     for (var pair = 1; pair <= length; pair++) { 
 
      result += " " + black; //\xa0\xa0\xa0 
 
     } 
 
     result += "<br />"; 
 
     for (var pair2 = 1; pair2 <= length; pair2++) { 
 
      result += black + " "; //\xa0\xa0\xa0 
 
     } 
 
     result += "<br />";   
 
    } 
 

 
    console.log(result); 
 
    return result; 
 
} 
 

 
document.getElementById("testid").innerHTML = chessBoard(4, "#");

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>test</title> 
 

 
</head> 
 

 
<body> 
 

 
    <div id="testid">Hello, here will be the pattern!</div> 
 

 
    <script src="Script1.js" type="text/javascript"></script> 
 
</body> 
 
</html>

Quelle

2016-10-24 Rishabh Prajapati

warum nicht? Weil Leerzeichen (einschließlich Zeilenumbrüche) keine besondere Bedeutung für HTML haben. Deshalb gibt es '
' Tags. Nur weil JS weiß, dass '\ n' ein Newline ist, bedeutet das nicht, dass die Umgebung, in die Sie ausgeben, das weiß. Sie müssen den KONTEXT der Ausgabe berücksichtigen. Da dieser Ausgabe-Kontext eine HTML-Rendering-Engine ist, müssen Sie HTML-Semantik verwenden, um einen Zeilenumbruch zu erstellen. –

Okay, ich habe über neue Zeilen auf HTML-Webseite. Aber was ist mit diesem Schachbrett? Es zeigt einfach Zeilen und Spalten von '#'. Während die Konsole den perfekten Abstand zwischen den Hashes zeigt, ist es ein Schachbrett. Wenn die erste Zeile '# # # #' ist, dann ist die zweite Zeile '# # # # '. Die Konsole scheint korrekt zu sein, aber nicht die HTML-Ausgabe. Bitte helfen Sie. :( –

Sie erstellen eine Webseite. Sehen Sie nicht "warum macht JS nicht, was ich will", und denke darüber nach "was kann ich JS-Ausgabe haben, um die Webseite korrekt aussehen zu lassen." JS hat absolut ** NICHTS ** mit dem Rendering Ihrer Ausgabe zu tun.Der Browser behandelt das. So herauszufinden, wie Sie den Browser zur Zusammenarbeit bringen. –

Ich bin nicht sicher, was Sie wollen, aber Text zu zeigen, wie Sie es eingeben, verwenden Sie einen pre:

HTML:

<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>test</title> 
    </head> 

    <body> 
     <pre id="testid">Hello, here will be the pattern!</pre> 
     <script src="Script1.js" type="text/javascript"></script> 
    </body> 

</html>

Js:

var board = ""; 
for (var y=0; y<8; y++) { 
    for (var x=0; x<8; x++) { 
     board += '#'; 
    } 
    board += "\n"; 
} 
console.log(board); 
document.getElementById("testid").innerHTML = board;

Quelle

2016-10-24 20:07:14 Nils

Entwerfen eines Schachbretts in JavaScript

Antwort

Verwandte Themen