동적으로 생성된 button의 값 가져오기!

Javascript/jQuery 2017.09.02 23:39

으아아아주 오래전에 학교 프로젝트로 웹 개발을 해본 뒤에 

회사에 와서 으아아아주 오래전에 웹 개발 프로젝트 2개 해보고 

그 뒤로 웹에 대해 거의 접해보지 못했다가 

요즘 electron과 express를 접하면서 

다시 HTML5와 jQuery, bootstrap 등을 보고 있는데 왜케 어려운지 ㅋㅋㅋㅋ 



아무튼, 동적으로 생성된 button의 class를 통해 접근해서 value값을 가져올 일이 생겼다. 
(사실 동적이 아니어도 똑같다) 

근데 아무리 눌러도 undefined만 내뱉는 것이다... 
(아... javascript에 대한 이해도가 떨어지는 그대여... ㅠㅠ) 

그 해법을 알게되서 이렇게 포스팅을 하려고 한다. 

자, 우선 HTML 태그는 다음과 같다. 
 

<button class='btn-primary' value='one'>click me!</button>
<button class='btn-primary' value='two'>click me!</button>
<button class='btn-primary' value='three'>click me!</button>

그럼, 각각의 버튼을 눌렀을때 해당 button이 갖고 있는 value 값을 가져오고 싶으면 어떻게 해야 하나? 

맨 처음 다음과 같이 코드를 짰었다. 
 

$('.btn-primary').on('click', () => {
  console.log(this.value);
}

자, 그럼 button을 눌러보면 무슨 답이 나왔을까? 그야말로 충격적이었다. 
 

undefined

와우... 



on() API를 확인 해보자. 여기 를 눌러서 확인하면 된다. 

여태 on() 은 단 2개의 인자만 받는 줄 알았는데 무려 4개씩이나 받을 수 있었다. 
 

.on( events [, selector ] [, data ], handler )

그 중에 위에서 화살표 함수로 쓴 부분은 handler 에 해당하는 부분으로 다음과 같이 생겼다. 
 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

Type: Function( Event eventObject [, Anything extraParameter ] [, ... ] )

타입이 함수인데 첫 번째 인자로 Event 를 받을 수 있다고 되어있다. 

그 중에 target 이라는 프로퍼티가 있는데 이건 this와 같은 역할을 한다. 

자 그럼 아래와 같이 한번 코드를 작성해서 수행해 보자. 
 

$('.btn-primary').on('click', (e) => {
  console.log(e.target.value);
}

그 결과는! 
 

"three"
"two"
"one"

와우! 굿!! 내가 원하는 값이 잘 나온다! ㅋㅋㅋ 


javascript 이건 너무 헷갈리고 어렵지만 재밌다. ㅋㅋㅋ 

[출처] http://seunghunchan.tistory.com/9