Логическая ошибка 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>'); 

Другие, чем просто улучшение способ кодирования стиль (например, с использованием обоих видов кавычек), я добавил еще один <br> на end, так как это означает, что последняя строка не будет выбрана.

Добавление canvas { border: 1px solid #000 } делает его выглядеть следующим образом:

Answer 2

Ваш код хорошо, но швы, что холст элемент не выбран при нажатии CTRL + только <br/> элементы. Он будет работать, когда вы добавите еще один <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>"); 
    } 
}