계산기만들기 프로젝트(js) 화면에 숫자를 이어서 나오게 하기

 

위에 보이는 것처럼, 첫화면에서 숫자를 연속적으로 눌렀을때 화면에 그 값이 하나만 나오는 것이 아닌 이어져서 나오게 하는 것이 오늘의 목표이다. 

 

1) 우선, 버튼이 눌렀을 때 작동하게 하기 위해서는 

buttons.addEventListner('click', function(event){

    const t= event.target;

    const c= t.classList[0]

    const content = t.textContent

 

}) 를 사용한다. 

 

여기에서 buttons는 미리 선언되어 있어야 하는 변수.

addEventListner는 해당 buttons에 적용될 메소드. 

해당 매소드의 첫 인자인 'click'은 이벤트 타입. 

해당 메소드의 두번째 인자인 function(event)는 익명함수로, 

click이라는 이벤트가 발생했을때, 실행이 되게 되는 함수. 라고 생각을 해주면 되겠다. 

 

그 밑에 있는 변수 t는 click이라는 이벤트가 전달한 객체의 내용을 말한다. 즉 여기에서는 clicked된 버튼의 정보가 될것이며, 이 정보가 변수 t에 저장이 되는 것이다. 

 

다음, 선언된 변수 c는 클릭된 버튼 정보가 저장된 t의 class명을 불러오고 있다. 

 

다음, content는 클릭된 버튼의 내용을 담게 된다. 

 

2)숫자가 이어져서 화면에 보이게 하기 위해서

 

html에서 해당 화면을 담당하는 class를 querySelector로 불러와 변수로 지정을 해줘야 한다. 이는 아래와 같은 형식으로 이루어 진다. 

const display = document.querySelector('.display')

 

이후, 

if (t.matches('button')) {  //클릭된 것이 button이고

if (c === 'number') {  //클릭된 것의 클래스 네임이 number라면, 

 

 

display.textContent = display.textContent + buttonContent;

//화면에 표시되고 있는 내용은 화면에 보이는 내용 + 눌려진 버튼의 내용//

 

으로 진행하게 되면 첫화면에서 처럼 숫자가 연속적으로 표시되게 된다.