JavaScript แสดงค่า TextBox จาก HTML

สอนเขียนภาษา JavaScript เพื่อแสดงค่าจาก input type textbox จากภาษา HTML โดยเมื่อใช้งานกรอกข้อมูลลง textbox และกดปุ่มตกลง JavaScript จะแสดงข้อความจาก textbox ที่หน้าเว็บไซต์

ตัวอย่าง JavaScript แสดงค่า TextBox จาก HTML

<input type="text" id="txt">
<input type="button" value="ok" onclick="getValueFromText()">
<br/>
<div id="result"></div>

<script>
    function getValueFromText() {
        document.getElementById('result').innerHTML = document.getElementById('txt').value;
    }
</script>

1. กำหนด id ให้ textbox ชื่อ txt และ div สำหรับแสดงผล id ชื่อ result ไว้สำหรับอ้างอิงใน JavaScript

2. ใส่คำสั่ง onclick ให้กับปุ่ม เวลาผู้ใช้งานกดจะวิ่งเข้าไปทำงานในฟังก์ชัน getValueFromText

3. ภายในฟังก์ชัน getValueFromText จะอ้างถึง id result โดยแสดงผลลัพธ์ผ่านคำสั่ง innerHTML ด้วยค่าที่อยู่ใน textbox ผ่าน id txt ด้วย คำสั่ง value