使用JavaScript设计国际象棋棋盘

我想用JavaScript打印国际象棋棋盘。但是输出并不像它所需要的那样。但是控制台打印正确。但网页上的输出是不同的。使用JavaScript设计国际象棋棋盘

我的另一个问题是为什么我不能使用“\ n”通过JavaScript代码在网页中添加新行？ Javascript理解为\ n作为新行和HTML为<br />。我应该在JavaScript中使用什么？

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>

来源

2016-10-24 Rishabh Prajapati

为什么不呢？因为空格（包括换行符）对html没有特殊的含义。这就是为什么有'
'标签。只是因为JS知道'\ n'是一个换行符并不意味着你输出的环境知道这一点。你必须考虑你的输出结果的上下文。由于输出上下文是HTML呈现引擎，因此您必须使用HTML语义来创建换行符。 –

好吧，我有关于html网页的新行。但那个棋盘怎么样？它只是显示'＃'的行和列。虽然控制台显示哈希和附件之间的完美间隔是棋盘。如果第一行是'＃＃＃＃＃'，那么第二行是'＃＃＃＃'。控制台看起来是正确的，但不是html输出。请帮忙。 :( –

你正在生成一个网页，不要看它“为什么JS不做我想做的事”，并开始思考“我可以用什么JS输出来使网页看起来正确”。 **没有任何**与你的输出渲染有关，浏览器正在处理它，所以要弄清楚如何让浏览器合作。 –

林不知道你想要什么，而是要说明文本在您键入它，使用前：

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;

来源

2016-10-24 20:07:14 Nils

使用JavaScript设计国际象棋棋盘

回答

相关问题