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

조회수 6968회

안녕하세요. 웹 개발을 하고있는 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 이벤트 안에서는 읽어오지 못하는 현상이 발생하네요. 원인이 무엇이고, 어떻게 해결해야할지 여쭤봅니다.

  • (•́ ✖ •̀)
    알 수 없는 사용자

1 답변

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)