JavaScript ดึงข้อมูลจากใน div ด้วยคำสั่ง innerText

สอนเขียน JavaScript ดึงข้อมูลจากใน div ด้วยคำสั่ง innerText บทความนี้แนะนำการใช้คำสั่ง document.getElementById ร่วมกับคำสั่ง innerText เพื่อดึงข้อมูลจากใน div ของ HTML ด้วย JavaScript สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง JavaScript ดึงข้อมูลจากใน div ด้วยคำสั่ง innerText

<div id="data">Hello Devdit</div>
<input type="button" onclick="getValue()" value="ดึงข้อมูลจาก Checkbox">

<script>
    function getValue() {
        let v = document.getElementById("data").innerText;
        console.log( "ข้อมูลใน div คือ "+v );
    }
</script>

ผลลัพธ์

ข้อมูลใน div คือ Hello Devdit

JavaScript ดึงข้อมูลจากใน div ตัวอย่างกำหนด id=data กับ div เมื่อผู้ใช้งานกดคลิกปุ่มจะเรียกใช้ฟังก์ชัน getValue ภายในฟังก์ชันจะอ้างถึง id=data ด้วย document.getElementById และใช้คำสั่ง innerText เพื่อดึงข้อมูลจากใน div ออกมาในรูปแบบตัวอักษร หรือ text และแสดงผลลัพธ์ออกสู่หน้าจอด้วยคำสั่ง console.log