[JavaScript] 버튼을 함수에 연결해보자

* 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다.

(섹션 2 : 34~36)

 

 

 

 

---

 

 

 

 

+ 버튼을 add 함수에 연결하기

 

먼저 vender.js 파일에 있는 addBtn을 app.js 파일에 작성한다.

 

addBtn.addEventListener("click", add);

 

이와 같이 작성한다. addEventListener는 브라우저에 내장된 함수이고 addBtn과 연결되어 있다. 이 함수는 매개변수 2개를 가지는 함수로 첫 번째 매개변수는 문자열, 두 번째 매개변수는 함수이다. 두 번째 매개변수에 적는 함수는 click이 일어나면 무슨 일이 일어날건지 브라우저에게 알리기 위한 것으로 함수를 간접적으로 실행하도록 한다. 이는 함수를 바로 실행하는 것이 아니라 브라우저에게 함수를 실행하도록 지시하는 것이다. 그래서 함수를 호출할 때 원래 함수 호출 방식인 add()가 아니라 add라고 적어야한다. 브라우저에게 함수의 이름만 알려주고 버튼이 클릭되었을 때 그 함수를 호출하도록 하기 위해서이다.

 

 

add 함수가 실제로 사용자 입력 값을 받아 출력하도록 수정하기

 

add 함수는 두 인자를 더하는 함수인데 이때 인자는 currentResult와 사용자가 입력한 값이다.

 

 

currentResult = currentResult + userInput.value;

 

 

이와 같이 currentResult 변수에 currentResult 변수의 값과 사용자가 입력한 값을 더해서 대입해준다. 사용자가 입력한 값을 가져올 때는 vendor.js 파일에 있는 userInput 상수를 사용하여 userInput.value라고 작성하면 된다.

 

 

이제 계산한 currentResult 값을 출력해주어야 하는데 기존의 코드에서는 outputResult가 스크립트의 끝에서 호출되고 있으므로 이를 add 함수가 실행될 때마다 호출되도록 위치를 바꿔주어야 한다. add 함수 내에 outputResult 함수를 적어준다.

 

 

완성된 코드는 다음과 같다.

 

 

function add(num1, num2) {
  currentResult = currentResult + parseInt(userInput.value);
  outputResult(currentResult, "");
}

 

 

 

 

하지만 이 코드를 실행해보면 다음과 같은 화면을 볼 수 있다.

 

 

 

 

 

출력을 할 때 값이 숫자로 출력이 되지 않고 문자열로 출력이 되어 숫자가 더해지지 않고 나열이 되고 있다. 그 이유는 HTML 코드 상 userInput이 숫자 유형으로 되어 있더라도 입력 요소의 값을 읽으면 문자열이 되기 때문이다.

 

 

문자열을 숫자로 변환해주기 위해서는 브라우저와 JavaScript에 내장된 함수인 parseInt 함수를 사용하면 된다. 이는 문자열을 입력 매개변수로 받아서 텍스트를 숫자(정수)로 변환해준다.

 

※ parseFloat 함수는 실수로 변환해주는 함수이다.

 

 

parseInt(userInput.value)

 

 

 

 

 

이와 같이 userInput.value 값을 매개변수로 parseInt 함수를 호출하면 정상적으로 계산이 되어 출력된다.

 

 

 

 

 

 

전체 코드는 다음과 같다.

 

 

const defaultResult = 0;
let currentResult = defaultResult;
 
function add(num1, num2) {
  currentResult = currentResult + parseInt(userInput.value);
  outputResult(currentResult, "");
}
 
addBtn.addEventListener("click", add);