[jQuery / for문 활용] input 태그 두 개에서 입력한 범위 내로 구구단 출력

jquery 연습용 문제
for문을 활용해 input 태그 두 개에서 입력한 범위 내로 구구단 만들기

---

<!-- HTML -->
<div>
  <input type="number" id="input_table" style="width: 50px">
  <input type="number" id="input_table2" style="width: 50px">
  <button id="btn_table">확인</button>
<div>  
<textarea type="text" id="table_result" style="height: 100px; margin-top: 10px;"></textarea>

 일단 HTML에서 숫자를 입력할 input box 두 개와 버튼을 하나 만들어준다. 버튼을 클릭하면 출력이 되게 할 것이다.

 그리고 밑에 결과값이 출력될 텍스트 영역을 생성해둔다. 스타일은 맘대로.

// JQEURY
$("#btn_table").click(function () {
  var num = $("#input_table").val(); 	//첫 번째 값
  var num2 = $("#input_table2").val();	 //두 번째 값

  var dan = []; //임시 배열

  //num2의 값이 num보다 작으면 실행
  if(num < num2) {
        //num단부터 num2단까지
        for(; num <= num2; num++) {
        	//2부터 9까지
        	for (var i = 2; i <= 9; i++) {
        		dan.push(num + " × " + i + " = " + (num*i) + `\n`); //연산
        	}
      	}
    }
  $("#table_result").val(dan.join('')); //결과 출력
})

 주석 달아놓은 그대로. input 값을 변수에 할당해놓고... if문으로 첫 번째 input 값이 두 번째 값보다 작아야 실행되게 해 놨다. 첫 번째 for문에서 num의 값은 이미 위에서 할당되어 있으므로 생략하고 num부터 num2까지 1씩 추가하며 반복한다. 두 번째 for문에서는 현재 단에다가 × 2, × 3, × 4, … × 9를 해줘야 하므로, 2부터 9까지 반복되도록 값을 정해준다.

 

 임시로 생성된 배열에다 연산된 값을 보내주고 출력.

 

 실행은 잘 되는데 `\n` 이게 자꾸 브라켓에서 에러가 뜬다. ,_.) 배열마다 줄 바꿈을 해서 보기 편하게 하기 위함인데... 빼기도 좀 그렇고. 다른 방법은 못 찾겠고. 오류 왜 뜨는 거지요?

아무튼 이런 느낌으로 출력이 된다.