jQuery로 그리드가 만들기 - 코드가 내 코드가 작동하는 방법을 알아낼과 같이하기 위해 노력하고있어

완료되지 :jQuery로 그리드가 만들기 - 코드가 내 코드가 작동하는 방법을 알아낼과 같이하기 위해 노력하고있어

GOAL

질문 :

만들기 Raphaël 종이 객체를위한 텍스트 입력, 버튼 및 컨테이너가있는 HTML 페이지. 사용자가 양식에 숫자를 입력하고 버튼을 클릭 한 다음 nxn 격자의 사각형을 그립니다. 사용자가 텍스트 입력에 8을 입력하고 버튼을 클릭하면 작은 사각형의 8 개의 행과 열을 그려야합니다. 이렇게하려면 다음과 같이 서로 안에 중첩 루프이 필요합니다 : * 제 (가장 안쪽) 루프 본문에서

for (row=1; ...) { 
    for (col=1; ...) { 
    ... 
    } 
}

를 X로 종이에 작은 광장을 그린 y 값은 루프 카운터에서 계산되므로 사각형이 격자 패턴으로 끝납니다.

이

내 코드입니다 :

x = 0 
 
y = 0 
 
grid = function() { 
 
\t entered_text = $('#howmany').val(); 
 
\t for (row = entered_text; row <= 15; row += 1){ 
 
\t \t for (col = entered_text; col <= 15; col += 1) { 
 
\t \t \t r = paper.rect(x, y, 20, 20); 
 
\t \t \t x = r * col 
 
\t \t } \t 
 
\t \t y = r + row; 
 
\t } 
 
} 
 

 

 
setup = function() { 
 
    paper = Raphael('svg', 400, 400) 
 
    jQuery('#start').click(grid) 
 
    
 
} 
 

 
jQuery(document).ready(setup)

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8" /> 
 
<script src="http://cmpt165.csil.sfu.ca/js/jquery-3.1.1.js"></script> 
 
<script src="http://cmpt165.csil.sfu.ca/js/raphael-2.1.4.js"></script> 
 
<script src="logic.js"></script> 
 
<title>Exercise 11</title> 
 
</head> 
 
<body> 
 
<h1>Exercise 11</h1> 
 

 

 
<div class="gridsize">Grid Size: 
 
<input type="text" id="howmany" /> 
 
<button id="start">Go</button></div> 
 

 
<div id="svg"></div> 
 

 
</body> 
 
</html>

출처

2017-04-01 MeowMeow

오류 메시지? 코드를 실행하면 어떻게됩니까? BTW. let, var 또는 const를 사용하여 변수를 정의해야합니다. 코드에서 선언하는 방식은 모두 윈도우 객체의 전역 속성이므로 매우 나쁜 습관입니다. –

* ".js가 올바른지 모르므로 그리드가 나타나게합니다."* * * 올바른 것은 아닙니다 * 올바른지, * 작동하지 않기 때문입니다. 'for (row = entered_text; row <= 15; row + = 1)을 코딩 할 때 그 자체는 지침의 샘플 코드와 이미 다름을주의하십시오. – nnnnnn

@nnnnnn 나는 for (row = 1; 행 <= 입력 _ 문자; 행 + = 1)'을 만들었고 작동했다 : – MeowMeow

당신은, 당신은 단지 NaN를 반환합니다 col로 r 값이 아닌 숫자를 가까이 곱했다하고, 어떤 좋지 않아. 그런 다음 entered_text을 숫자로 변환하고 for 루프를 수정했습니다. 그래서 나는 앞서 가서 그것을 업데이트했다. 패딩을 원하면 20을 모두 25으로 늘리면됩니다.

x = 0 
 
y = 0 
 
grid = function() { 
 
\t entered_text = Number($('#howmany').val()); 
 
\t for (row = 0; row < entered_text; row += 1){ 
 
\t \t for (col = 0; col < entered_text; col += 1) { 
 
\t \t \t paper.rect(20 * col, 20 * row, 20, 20); 
 
\t \t } \t 
 
\t } 
 
} 
 

 

 
setup = function() { 
 
    paper = Raphael('svg', 400, 400) 
 
    jQuery('#start').click(grid) 
 
    
 
} 
 

 
jQuery(document).ready(setup)

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8" /> 
 
<script src="http://cmpt165.csil.sfu.ca/js/jquery-3.1.1.js"></script> 
 
<script src="http://cmpt165.csil.sfu.ca/js/raphael-2.1.4.js"></script> 
 
<script src="logic.js"></script> 
 
<title>Exercise 11</title> 
 
</head> 
 
<body> 
 
<h1>Exercise 11</h1> 
 

 

 
<div class="gridsize">Grid Size: 
 
<input type="text" id="howmany" /> 
 
<button id="start">Go</button></div> 
 

 
<div id="svg"></div> 
 

 
</body> 
 
</html>

출처

2017-04-01 06:00:36 Neil

루프 조건에서'<'보다는'<'이어야한다. – nnnnnn

도움을 주셔서 대단히 감사합니다 !! : D – MeowMeow

이봐 요, 해결책으로 표시 할 수 있다면, 많은 도움이 될 것입니다. 그리고 아무런 문제 없습니다. 하지만 nnnnnn은 정확합니다. 내 답변이 업데이트되었습니다. – Neil

jQuery로 그리드가 만들기 - 코드가 내 코드가 작동하는 방법을 알아낼과 같이하기 위해 노력하고있어

답변

관련 문제