JS 예제) 반복문을 활용한 구구단 출력하기

// 반복문을 활용한 구구단 출력하기

 

오늘은 버튼을 눌렀을 때 해당 숫자의 구구단을 출력해주는 초간단 구구단 출력기를 구현해보려고 한다.

for문 사용과 증감 연산자 사용을 연습해볼 수 있는 예제다.

구현된 최종화면에는 아래와 같이 구구단이 출력된다.

 

 

#HTML

<article class="ex-gugu">
  <h2>구구단 출력</h2>
  <div>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>All</button>
  </div>
  <div class="result">   
  </div>
</article>

#JAVASCRIPT

const elBtn = document.querySelectorAll('.ex-gugu > div > button');
const elResult = document.querySelector('.result');
let result = '';

let gugu = function(n){
  for(i=1; i<=9; i++){
    result += `${n} x ${i} = ${n*i}<br>`;
  };
};

elBtn.forEach(function(value,key){
  value.onclick = function(){
    if(key != 8){
      gugu(this.textContent);
    }else{
      for(j=2; j<=9; j++){
        gugu(j);
      };                       
    }
    elResult.innerHTML = result;
    result = '';                   
  };
});

 

간단한 코드로 나대신 구구단을 외워주는 프로그램을 만들어보았다.

마지막 ALL 버튼을 눌렀을 때 예쁘게 옆으로 출력되었으면 좋겠는데 어떻게 단위를 끊어서 옆으로 출력할 지는 좀 더 연구가 필요할 것 같다.