[레츠기릿JS] 계산기 만들기 / event 객체로 중복 제거하기

  const onClickNumber  = (number) =>  (event) => {
    if(operator){ //연산자 비어 있지 않을 때
        numTwo += number;
    }else { //연산자 비어 있을 때
        numOne += number;
    }$result.value += number;
}

event 객체는

 event.target.value

화면상에서 입력 받은 값을 가져오기 위해 사용하는데

여기서 event는 어디서 나온 것인가 => 브라우저가 넣어주는 것이다

 

 

---

const a = () => {}
document.querySelector('#plus').addEventListener('click', a);

함수 자리에 a라는 함수를 넣었기 때문에 문제 없다

 

 

const a = (event) => { console.log(event.target.value)}
document.querySelector('#plus').addEventListener('click', a);

그렇다면 위의 코드에서 event는 어디서 나타난 것인가?

위의 코드는 클릭을 하면, a라는 함수가 실행된다

그렇다면 a함수는 누가 실행해주는 것인가?

=> 브라우저가 실행해준다. 그 때 브라우저가 a() 함수 안에 인수로 event를 넣어서 실행시킨다

a(event) // a()

 

---

 

브라우저에 있는 기능을 이용해서 중복 제거하기

const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
const onClickNumber  = (number) =>  (event) => {
    if(operator){ //연산자 비어 있지 않을 때
        numTwo += event.target.textContent;
    }else { //연산자 비어 있을 때
        numOne += event.target.textContent;
    }$result.value += event.target.textContent;
}
    document.querySelector('#num-0').addEventListener('click', onClickNumber);
    document.querySelector('#num-1').addEventListener('click', onClickNumber);
    document.querySelector('#num-2').addEventListener('click', onClickNumber);

event.target 은 클릭한 버튼

그것의 textContent는 클릭한 버튼의 텍스트 * textContent는 문자열이다

이전에 고차함수를 만들어서 onClickNumber('0') 이렇게 만들어준 코드를 이렇게 수정할 수 있다

 

 

 

const onClickOperator  = (op) =>  () => {
    if(numOne){ 
        operator = op;
        $operator.value = op;
    }else { 
        alert('숫자를 먼저 입력하세요');
    }
}

document.querySelector('#plus').addEventListener('click', onClickOperator('+'));

onClickOperator('+') 이렇게 하면 

operator = op; 가 '+' 가 된다

 

 

 

---

const onClickNumber  = (number) =>  (event) => {
    if(operator){ //연산자 비어 있지 않을 때
        numTwo += event.target.textContent;
    }else { //연산자 비어 있을 때
        numOne += event.target.textContent;
    }$result.value += event.target.textContent;
};

document.querySelector('#num-0').addEventListener('click', onClickNumber);

고차함수에서 event 넣어주는 걸로 바꾸다가 이 부분 수정을 안했더니 버튼이 눌려도 숫자가 표시 안되었다

= (number) => 이 부분을 지워줘야 작동함

 

(number) =>  (event) => 이렇게 사용하려면

onClickNumber('0')

onClickNumber에 매개변수를 넣어줘야 한다 

 

 

 

---

 

 

 

숫자는 입력이 잘 되고 있다

하지만 연산자를 클릭하고 나서도 입력칸이 비워지지 않고 연달아 숫자가 입력되고 있다

이 부분을 수정해줘야 한다

 

 

---