게산기 공부 중 질문있습니다

Question

버튼에 id를 각자 주셨는데 같은 클래스명을 사용하고 클릭한 버튼의 textContent만 받으면 가능하지 않을까? 하고 생각했는데 7만 인식하고 다른 버튼은 인식을 아예 못하는데 이유가 뭔지 모르겠습니다.ㅠㅠ event.target으로 콘솔로그를 찍어봐도 7밖에 인식이 안돼서 이유를 잘 모르겠습니다.... < html lang =" en "> < head > < meta charset =" UTF-8 " /> < title > calculator < style > * { box-sizing : border-box ; } # operator { width : 50px ; height : 50px ; margin : 5px ; text-align : center ; } # result { width : 180px ; height : 50px ; margin : 5px ; text-align : right ; } button { width : 50px ; height : 50px ; margin : 5px ; } < body > < input readonly id =" operator " /> < input readonly type =" number " id =" result " /> < div class =" row "> < button class =" digit "> 7 < button class =" digit "> 8 < button class =" digit "> 9 < button id =" plus "> + < div class =" row "> < button class =" digit " id =" num-4 "> 4 < button class =" digit " id =" num-5 "> 5 < button class =" digit " id =" num-6 "> 6 < button id =" minus "> - < div class =" row "> < button class =" digit " id =" num-1 "> 1 < button class =" digit " id =" num-2 "> 2 < button class =" digit " id =" num-3 "> 3 < button id =" divide "> / < div class =" row "> < button id =" clear "> C < button class =" digit " id =" num-0 "> 0 < button id =" equal "> = < button id =" multiply "> x < script > let numOne = "" ; let operator = "" ; let numTwo = "" ; const $operator = document . querySelector ( " #operator " ) ; const $result = document . querySelector ( " #result " ) ; const onClickNumber = ( event ) => { if ( ! operator ) { numOne += event . target . textContent ; $result . value += event . target . textContent ; return ; } if ( ! numTwo ) { $result . value = "" ; } numTwo += event . target . textContent ; $result . value += event . target . textContent ; }; document . querySelector ( " .digit " ) . addEventListener ( " click " , onClickNumber) ;

제로초(조현영) · Answer

document.querySelector는 처음 만나는 태그 하나만 선택합니다. 여러 개를 선택하려면 document.querySelectorAll을 써야하고요. 유사배열이라서 반복문을 돌리면서 eventlistener를 달아주어야 합니다.