javascript, click이벤트 안에서 text를 가져오려 합니다
조회수 6981회
안녕하세요. 웹 개발을 하고있는 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 답변
-
-
(•́ ✖ •̀)
알 수 없는 사용자
-
댓글 입력