javascript - 4x4 キャンバス描画のロジック エラー

Question

Ctrl+を押して、これからA描画されたすべてのキャンバスを強調表示すると、最後の行が空白またはすべて結合されているように見えます。キャンバスの 4x4 グリッドを作成しようとしています。これで私の論理的な間違いは何ですか？

var count = 0;
while (count < 16) {
    if (count % 4 == 0)
        document.write("<br><canvas id = \"canvas_ \" + count + \" width = \"50\" height = \"     50\"></canvas>");
    else
        document.write("<canvas id = \"canvas_ \" + count + \" width = \"50\" height = \" 50\"></canvas>");
    count++;
}

Answer 1

私はあなたのコードを少し書き直しました：

var count = 0;
while (count < 16) {
    if (count % 4 == 0)
        document.write('<br>');
    document.write('<canvas id="canvas_' + count + '" width="50" height="50"></canvas>');
    count++;
}
document.write('<br>');

コーディング スタイルの改善 (両方の種類の引用符の使用など) 以外に、最後にもう 1 つ追加<br>しました。それが原因で最後の行が選択されないからです。

を追加するcanvas { border: 1px solid #000 }と、次のようになります。

Answer 2

CTRLコードは問題ありませんが、 +要素Aのみを押したときにキャンバス要素が選択されていないことがわかります<br/>。最後にもう1つ追加すると機能します<br/>。また、コードカウントが文字列内にあるというエラーもあります。

var count = 0;
document.write("<br>");
while (count < 16) {
    document.write("<canvas id=\"canvas_" + count + "\" width=\"50\" height=\"50\"></canvas>");
    count++;
    if (count % 4 == 0) {
        document.write("<br>");
    }
}