(HTML / CSS / JS) 버튼 클릭 시 자동 합계(2019/9/4)(리팩토링 필요!)

-최종 결과

 

 

-HTML

<input type="text" class="sum">
<input type="text" class="sum">
<input type="text" class="sum">
<button id="btn">click</button>
<p id="display">0</p>

<input type="text" class="sum">

input 타입을 text로 하고 class명으로 선택한다. 나중에 js에서 유사 배열로 가지고 오기 위해서다.

 

<button id="btn">SuM</button>

합계 버튼이다.

 

<p id="display">0</p>

합계한 값을 출력하는 태그로 사용한다.

 

 

-javascript

1. html태그를 js로 가지고 오기

const sum_input = document.getElementsByClassName('sum');
const btn = document.getElementById('btn');
const display = document.getElementById('display');

const sum_input = document.getElementsByClassName('sum');

input 태그를 ClassName으로 받아와서 유사 배열로 만든다. 배열로 받아와야 나중에 반복문을 사용하여 input의 value값을 편하게 가져올 수 있다.

 

const btn = document.getElementById('btn');

합계 버튼에 이벤트를 넣기 위해 가지고 온다.

 

const display = document.getElementById('display');

값을 출력하기 위해 가지고 온다.

 

2. 클릭 이벤트 설정 && input값 가져오기

function totalSum(){
  let saveValue = [];
  for(let i = 0; i < sum_input.length; i++){
    saveValue.push(parseInt(sum_input[i].value));
  };
  filterNaN(saveValue);
};

btn.addEventListener('click', totalSum);

btn.addEventListener('click', totalSum);

합계 버튼에 click이벤트를 설정하고 click시 실행할 코드는 totalSum 함수를 선언하여 따로 작성한다.

 

let saveValue = [];

input의 value값을 담기 위해 빈 배열을 만든다. 

 

for(let i = 0; i < sum_input.length; i++){

saveValue.push(parseInt(sum_input[i].value));

};

input의 개수만큼 반복시키고 input의 value 값을 push() 메서드를 이용하여 빈 배열에(saveValue)에 담는다. 값을 담을 때 parseInt() 함수를 사용하지 않으면 문자열로 담기기 때문에 parseInt()함수를 사용하여 input의 value값을 숫자로 치환시켜 담는다.

 

filterNaN(saveValue);

이제 클릭하면 빈 배열(saveValue)에 input의 value값이 숫자로 담긴다. 값이 담긴 배열을 filterNaN() 함수에 매개변수로 넘긴다.

 

3. NaN 걸러내기

function filterNaN(val){
  let notNan = [];
  val.forEach(function(value){
    if(!isNaN(value)){
      notNan.push(value);
    };
  });
  getTotalSum(notNan);
}
function totalSum(){
  let saveValue = [];
  for(let i = 0; i < sum_input.length; i++){
    saveValue.push(parseInt(sum_input[i].value));
  };
  filterNaN(saveValue);
};

btn.addEventListener('click', totalSum);

function filterNaN(val){}

saveValue의 값을 filterNaN() 함수에서 val로 받는다.

 

let notNan = [];

NaN값을 걸러서 빈 배열 notNan에 담는다.

 

val.forEach(function(value){

if(!isNaN(value)){

notNan.push(value);

 };

});

forEach() 문을 사용하여 val의 배열 값을 한 바퀴 돌아 조건문에 부합할 경우 빈 배열(notNan)에 넣는다. 조건은 val의 값 중에서 NaN가 아닌 경우 notNan에 값으로 넣는다.

NaN를 거르는 이유,

NaN로 인해 정상적인 합계가 되지 않는다.

사용자가 input에 값을 넣고 다른 값으로 수정할 경우 NaN값으로 바뀐다. 따라서 합계가 되지 않는다.

 

getTotalSum(notNan);

NaN값을 거른 배열을 getTotalSum() 함수에 값을 넘긴다.

 

4. 최종 합산하기

function getTotalSum(sumVal){}

notNan의 값을 getTotalSum() 함수에서 sumVal로 받는다.

 

let displaySum = 0;

최종합계 값을 변수에 담기 위해 displaySum를 선언하고 값을 0으로 준다. 여기서 주의할 점은 displaySum변수를 getTotalSum() 함수 밖에 선언할 경우 displaySum변수에 값이 축척되기 때문에 반드시 함수 안에 만들어야 한다.

 

sumVal.forEach(function(value){

displaySum += value;

});

forEach() 문을 사용하여 sumVal에 있는 값들을 더한다.

만약, value에 [1,2,3]의 값이 있을 경우

(displaySum 초기 값) 0 + (value의 첫 번째 값) 1 = 1 이 displaySum에 들어가고

1 + 2 = 3의 값이 displaySum에 들어가고

3 + 3 = 6의 값이 displaySum에 들어간다. 

최종적으로 displaySum의 값은 6으로 바뀌게 된다.

 

display.innerHTML = Number(displaySum).toLocaleString('en');

단위를 나타내는 코드이다.