Devdit
 

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

2.2K

สอนเขียน 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' เพื่อแสดง

เขียน 1 ปีที่แล้ว
ชอบ
ลิ้งก์
แชร์
Devdit มีช่อง YouTube แล้ว
เราสร้างวิดีโอเกี่ยวกับเทคโนโลยี ทำตามง่ายๆ