동적으로 가져오게 하는 자바스크립트 어떻게 해야 하나요?

허인구마틴   
   조회 4010   추천 0    

다음의 태그에서 클릭하면 아멘이란 값을 가져오게 하는 자바스크립트 어떻게 해야 하나요?

<a class="co_btn" onclick="psm_vote_click('1');"><i class="fa fa-bell-o"></i> 아멘</a>

psm_vote_click 을 클릭하면

아멘이란 값을 가져오게 하고 싶습니다.


자바스크립트 입니다.
예전에 나를 도와준 마틴님이란 분이 있어 그분을 기억합니다.
2cpu의 도움주신 많은 분들께 늘 감사드립니다.
☎ HP 010-9678-7900
짧은글 일수록 신중하게.
허인구마틴 2019-02
http://www.opencode.co.kr/jquery_tips/41?&page=4
불당님의 자료가 도움이 조금 되고 있습니다.
김제연 2019-02
아멘 이란 값을 li 에 넣는다는 말씀이신가요?
     
허인구마틴 2019-02
$(this).text();
이것이라면

alert()에 넣고 싶지요
즉 아멘을 클릭하셨습니다 라고 하고 싶습니다.
허인구마틴 2019-02
$(this).text();
이게 맞지 싶은데... 값이 안 올라오네요. ㅠㅠ
김제연 2019-02
psm_vote_click('1')
그냥
psm_vote_click('아멘')
이나 .. switch 문이나 if 문 써서
1이면 아멘
2면.. 할렐루야
이렇게 하면 되지 않나요?
     
허인구마틴 2019-02
동적으로 값을 가져오고 싶은 것입니다.
김제연 2019-02
그렇게 하면.. 안되고 jquery 사용하시면 선택자로 선택하셔서 ..
하위 엘리먼트를 알아낸뒤에 ..텍스트를 가져오셔야 할껄요?
김제연 2019-02
그 동적인 값을 return 시켜 주면 될텐데요 ..
아니면 저 페이지 만들어질때
동적인 값을 button 에 data필드로 내장시켜서
this.dataset로 접근 하셔도 될것 같구요 .
허인구마틴 2019-02
<button> 으로 변경해도 됩니다.ㅎㅎ
김제연 2019-02
지금 파일 만들어서 해보니
this로는window 가 오네요

지금꺼 그대로 사용하시고
event.srcElement.text()
하시면 아멘을 가져올 수 있습니다.
가져올때 공백같은것도 다 가져오니
변수값으로 사용하실때는 trim 한번 해주세요.
허인구마틴 2019-02
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>button Test</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
           
            $( document ).ready( function() {
               
                $("#button").click(function(){
                        alert($(this).text());
 
                });
       
            });
 
        </script>
    </head>
    <body>
        <button id="button"> 아멘~ 감사합니다. </button>
    </body>
</html>
henol 2019-02
psm_vote_click 메소드에 this를 같이 넘겨서 innerText를 얻어오는 방법도 있습니다.
     
허인구마틴 2019-02
아래 샘플에서 이것을 되도록 하고 싶습니다.

// 아래 이부분이 되게 하고 싶습니다.
// alert($(this).text());
          
henol 2019-02
제 방법은 이런식입니다.
1. 펑션 선언문에서 psm_vote_click()  -->  psm_vote_click(r) 이렇게 r파라미터를 받도록 선언합니다.
    r은 제가 붙인 임의 변수니까 다른거 맘대로 쓰세요.
2. button태그던 a태그던,  onclick="psm_vote_click(this);"  라고 this를 넘겨서 위의 r파라미터로 받습니다.
3. psm_vote_click 펑션에서는 받은 r로 innerText를 출력합니다.
    alert(r.innerText);    이런식일까요.
김제연 2019-02
제이쿼리 왜이렇게 낮은거 사용하시나요
     
허인구마틴 2019-02
인터넷 샘플을 가져오다 보니 그런 것입니다. ㅋㅋㅋ
김제연 2019-02
어찌됐든 해결돼셨으니 된거죠 ..
자바는 안좋은게 방법이 너무도 많아서 뭐가 좋은건지 모른다는게..
     
허인구마틴 2019-02
해결은 아직 아닙니다. ㅠㅠ
허인구마틴 2019-02
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>button Test</title>
        <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

        <script>
           
            $( document ).ready( function() {
               
                $("#button").click(function(){
                      alert($(this).text());
                });
       
            });

function psm_vote_click() {
// 아래 이부분이 되게 하고 싶습니다.
// alert($(this).text());
}
        </script>
    </head>
    <body>
        <button id="button" onclick="psm_vote_click();"> 클릭 </button>
    </body>
</html>
Ray 2019-02
엘리먼트.addEventListenr(e) {
    alert(e.textContent);
  }
허인구마틴 2019-02
http://jsfiddle.net/KdZLa/

여기에 답이 있네요.
허인구마틴 2019-02
최종 찾았던 답입니다.
참조하실 분을 위해서 남겨둡니다.
button으로  마찬가지로 동일합니다.
------------------------

<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>button Test</title>
        <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

        <script>
function clickfunc(obj, vote) {
var t = $(obj).text();
alert(t);

alert(vote+"번을 선택하셨습니다.");

}
        </script>
    </head>
    <body>

        <a href='#' onclick='clickfunc(this, "1")'>아멘~ 사랑해요</a>

    </body>
</html>
     
허인구마틴 2019-02
구글 선생님께 계속 찾고 찾아 답을 찾았습니다.
참 힘들었습니다. ㅠㅠㅠ
박경원 2019-02
프론트엔드 라이브러리로 VueJS 추천드립니다
빠르고 간단하고 쉽습니다
     
허인구마틴 2019-02
감사합니다.
오늘 정말 귀한 정보를 받는 것 같습니다.
이런 정보를 가르쳐 주시는 분이 없어서 오늘 눈이 번쩍 입니다.
혹시라도 조금 더 지도해주실 수 있는지요? ㅎㅎㅎ

ppcmmc@naver.com으로 라도 샘플을 하나 알려주시면
고맙겠습니다.
제 전화번호는 전세계 오픈이라.. ...ㅋㅋㅋ
     
허인구마틴 2019-02
이것도 하나의 제이쿼리 와 같은 종류인가요?
          
박경원 2019-02
https://kr.vuejs.org/v2/guide/index.html
VueJS 공식 홈페이지에 문서화가 상당히 잘 되어 있습니다
예. VueJS는 제이쿼리와 같은 JS 프론트엔드 라이브러리입니다.
Vue를 통하면 let msg = "HelloWorld!"; 와 같은 자바스크립트 변수를
사용자 화면에 출력되는 html 요소와 연결시킬 수 있습니다.
msg 변수를 수정하면 Vue가 그것을 감지하고 사용자의 화면에 출력되는 메시지도 알아서 바꾸어 줍니다.
그래서 제이쿼리처럼 일일히 $('#msg').innerHTML = "new message"; ... 이런식으로 하나하나 신경을 쓸 필요가 없습니다
원글의 질문처럼 사용자가 ~을 클릭했을 때, ~위에 마우스를 올렸을 때... 등의 상황에 어떠한 일을 수행해야 하는지도
v-bind 디렉티브로 간단히 설정 가능합니다. v-bind 쓰는것 하나로 사용자가 폼에 글자를 입력하면 자동으로 그것이 자바스크립트 변수에 저장되게 할 수 있고
그 반대 혹은 양방향도 가능합니다.
또한 React 처럼 화면을 구성 요소로 나누어 만들 수 있고... 동시에 React 처럼 JSX 같은 이상한 문법을 배울 필요없이 html, css를 그대로 사용할 수 있습니다
React, JQuery, VueJS 중에서는 Vue가 가장 쉽고 간편한것 같습니다
               
허인구마틴 2019-02
정말 신기하네요.
그야말로 획기적인 것 같습니다.

내 주위의 사람들이 이런 정보를 잘 모르시는 것 같습니다.
자바와 제이쿼리와 필수적인데..

VueJS는 한글로 뭐라고 하나요?
이것을 배우고 싶네요.

샘플문서를 몇개 만들어 놓고 응용하는 법을 조금씩 하면서
실력을 쌓아야 할 것 같습니다.

혹시라도 공부와 연습이 될만한 좋은 샘플 문서 있으면 좀 부탁드리겠습니다.
ppcmmc@naver.com 아니면 쪽지에 첨부파일로 부탁드리고 싶습니다.
               
허인구마틴 2019-02
조금 연습해봤습니다.
정말 획기적이네요
사람의 생각의 틀을 완전히 더 엎어놓은 것 같습니다.

쉽게 말해서 반응형이라고 할 개념이네요.
이젠 제이쿼리와 이것을 같이 사용하다가
서서히  vue로 이동을 하고 싶어집니다.
                    
박경원 2019-02
Vue는 한글로 "뷰" 라고 읽습니다. 그런데 Vue JS로 검색을 해야 검색결과가 가장 잘 나올겁니다.
샘플 문서는, 제가 알기로는 저 Vue 공식 가이드 홈페이지에 가장 정리가 잘 되어있습니다.
저도 저 사이트에서 하나씩 예제 따라해보고 공부를 했습니다.
로그인 하시면 댓글을 남길 수 있습니다


QnA
쓰기
제목Page 4123/5718
2014-05   5207033   1 정은준1
2015-12   1738860   1  백메가
2014-07   4009   1 박문형
2017-08   4009   1 탁영길
2019-12   4009   1 허인구마틴
2014-08   4009   1 Nicoffeine
2015-07   4009   1 izegtob
2020-12   4009   1 이덕호
2016-01   4009   1 inquisitive
2016-12   4009   1 케리스
2015-05   4009   1 뉴클래식
2016-03   4009   1 Psychophysi…
2014-11   4009   1  제주김재민
2016-02   4009   1 김건우
2017-05   4009   1 신은왜
2017-12   4009   1 김건우
2015-12   4009   1 이해하면오…
2017-05   4008   1 루벤
2017-12   4008   1 전설속의미…
2018-03   4008   1 Harde
2017-03   4008   1 악남
2018-03   4008   1  명성호
목록
쓰기