4x4 캔버스에서의 논리 오류

Question

Ctrl + 을 눌러 내 그림 캔버스를 모두 강조 표시하면 마지막 행이 비어 있거나 모두 결합 된 것처럼 보입니다. 나는 캔버스의 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> 하나 더 추가했습니다 마지막 행이 선택되지 않기 때문입니다.

canvas { border: 1px solid #000 }가이처럼 보이게 추가 :

Answer 2

코드는 괜찮습니다하지만 당신은 만 <br/> 요소 CTRL + 를 누를 때 그 캔버스 요소가 선택되지 않은 솔기. 끝에 <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>"); 
    } 
}