JavaScript ซ่อน/แสดง TextBox HTML ด้วย style.display

สอนเขียน JavaScript ซ่อน/แสดง TextBox ภาษา HTML ด้วยคำสั่ง style.display บทความนี้แนะนำการใช้คำสั่ง style.display ร่วมกับ none สำหรับซ่อน และ block สำหรับแสดง Elements หรือ TextBox สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง JavaScript ซ่อน/แสดง TextBox HTML ด้วย style.display

<input type="text" id="txt"><br/>
<input type="button" value="ซ่อน" onclick="hide()"> <input type="button" value="แสดง" onclick="show()">

<script>
    function show() {
        let txt = document.getElementById("txt");
        txt.style.display = 'block';
    }
    function hide() {
        let txt = document.getElementById("txt");
        txt.style.display = 'none';        
    }
</script>

JavaScript ซ่อน/แสดง TextBox ตัวอย่างเมื่อผู้ใช้งานกดคลิกปุ่มซ่อนจะเรียกฟังก์ชัน hide ทำงาน โดยอ้างถึง id = txt และใช้คำสั่ง style.display = 'none' เพื่อซ่อน และกรณีถ้าผู้ใช้งานกดคลิกปุ่มแสดงจะเรียกฟังก์ชัน show โดยอ้างถึง id = txt เหมือนกัน และใช้คำสั่ง style.display = 'block' เพื่อแสดง