JavaScript에서 div 값 가져오기 – undefined가 나오는 이유와 해결 방법

<div> 요소에는 value 속성이 없습니다. 따라서 input 요소처럼 .value로 접근하면 undefined가 반환됩니다. div의 내용을 읽거나 설정하려면 document.getElementById().innerHTML을 사용하는 것이 올바른 방법입니다. 다음은 이를 보여주는 JavaScript 예제 코드입니다.

예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class='getValueFromDiv' id='getValue' contenteditable="true" onkeyup='display()' style="color: red">This is the value</div>
<script>
    function display(){
        var storedValue = document.getElementById('getValue').innerHTML;
        console.log("The value is===" + storedValue);
    }
</script>
</body>
</html>

실행 방법

위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 후, 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 VS Code 편집기에서 “Open with Live Server” 옵션을 선택하세요.

실행 결과

프로그램이 실행되면 화면의 빨간색 영역(contenteditable div)을 클릭하고 키보드로 입력하거나 방향키를 조작할 때마다 콘솔에 현재 div의 내용이 출력됩니다.

The value is===This is the value

실행 화면은 아래 스냅샷과 같습니다.

JavaScript에서 div 값 가져오기 – undefined가 나오는 이유와 해결 방법

정리

div, span, p 같은 일반 HTML 요소에는 value 속성이 존재하지 않기 때문에 .value로 접근하면 항상 undefined가 반환됩니다. 반면 innerHTML이나 textContent를 사용하면 요소의 실제 내용을 정확하게 읽어올 수 있습니다. 상황에 따라 HTML 태그까지 포함해야 한다면 innerHTML, 순수 텍스트만 필요하다면 textContent를 사용하는 것이 좋습니다.