javascript, click이벤트 안에서 text를 가져오려 합니다


안녕하세요. 웹 개발을 하고있는 1년차 개발자입니다. 파이썬 Flask프레임워크와 Jinja템플릿을 이용해서 개발하고 있습니다. 아래는 html소스코드입니다.

...
<body>
<div id="parent_of_display_btn"></div>
<div id="display_title"></div>
...
<input type="text" id="input_title" name="input_title">
...
<button onclick="Something();">불러오기</button>
...
<script src="{{url_for('.static', filename='js/custom/custom.js')}}" type="text/javascript"></script>
</body>

아래는 custom.js 파일의 코드입니다.

function Something(){
    div = document.createElement('div');
    div.setAttribute("id", "display_btn");
    document.getElementById('parent_of_display_btn').appendChild(div);
    ...
    ..
    $('#display_btn').off('click');
    $('#display_btn').click(function() {
      document.getElementById('display_title').innerHTML = document.getElementById('input_title').value;
    });
}

소스와 같이 불러오기 버튼을 눌렀을 경우, display_btn이라는 id를 갖는 div를 만들고, 이를 parent_of_display_btn에 child로 추가합니다. 그리고 만들어진 display_btn을 눌렀을 경우, input_title의 text value 값을 display_title 아이디를 갖는 div에 표시하기 위한 내용을 click함수에 넣었구요.

그런데 실행을 해보면, input_title에 입력을해도 document.getElementById('input_title').value의 값이 null을 갖습니다. click이벤트 밖에서 document.getElementById('input_title').value에 접근했을때는 value를 잘 읽어 오는데 click 이벤트 안에서는 읽어오지 못하는 현상이 발생하네요. 원인이 무엇이고, 어떻게 해결해야할지 여쭤봅니다.

  • 2016년 05월 03일에 작성됨

조회수 379


1 답변


좋아요
1
싫어요
채택취소하기

https://jsfiddle.net/mps8e95z/

jsfiddle에서 확인해보니 의도하신대로 동작하네요.

여기 작성되지 않은 다른 코드가 원인일 가능성이 있어 보이네요.

  • 2016년 05월 03일에 작성됨

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close