ดึงค่าจาก div ด้วย JavaScript ได้ค่า undefined? แก้ไขอย่างไร

ปัญหาที่พบบ่อย: พยายามดึงค่าจาก <div> ด้วย .value แล้วได้ undefined เพราะ <div> ไม่มีคุณสมบัติ value (มีเฉพาะ Form Elements เช่น <input>, <textarea>, <select>)

วิธีแก้: ใช้ innerHTML หรือ textContent

ตัวอย่าง: ดึงค่าจาก div ที่แก้ไขได้ (contenteditable)

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Value from Div</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        #getValue { 
            border: 1px solid #ccc; 
            padding: 10px; 
            min-height: 50px; 
            color: red; 
            margin: 10px 0;
        }
        .result { font-size: 18px; font-weight: 500; color: blueviolet; }
    </style>
</head>
<body>
    <h1>ดึงค่าจาก div แบบถูกต้อง</h1>
    <p>พิมพ์ข้อความในกล่องด้านล่าง (contenteditable):</p>
    <div id="getValue" contenteditable="true" oninput="display()"></div>
    <div class="result"></div>

    <script>
        function display() {
            // ❌ ผิด: div ไม่มี .value
            // var storedValue = document.getElementById('getValue').innerHTML.value;
            
            // ✅ ถูกต้อง: ใช้ innerHTML หรือ textContent
            var htmlContent = document.getElementById('getValue').innerHTML;
            var textContent = document.getElementById('getValue').textContent;
            
            console.log("HTML:", htmlContent);
            console.log("Text:", textContent);
            
            document.querySelector(".result").innerHTML = 
                `innerHTML: ${htmlContent} <br>` +
                `textContent: ${textContent}`;
        }
    </script>
</body>
</html>

ผลลัพธ์

พิมพ์ในกล่องสีแดง → แสดงผลลัพธ์ทันที:
innerHTML: ข้อความพร้อม HTML Tags (ถ้ามี)
textContent: ข้อความบริสุทธิ์

สรุป: เมื่อไหร่ใช้อะไร

ข้อผิดพลาดที่พบบ่อยในโค้ดต้นฉบับ

// ❌ ผิด - div ไม่มี .value
var storedValue = document.getElementById('getValue').innerHTML.value;

// ✅ ถูกต้อง
var storedValue = document.getElementById('getValue').innerHTML;
// หรือ
var storedValue = document.getElementById('getValue').textContent;