JavaScript ซ่อน/แสดง Button

สอนภาษา JavaScript เขียนโค้ด ซ่อน/แสดง ด้วยการกดปุ่ม Button โดยตัวอย่างจะเป็นการ ซ่อน/แสดง TextBox จากการกดปุ่มผ่านคำสั่ง style.display สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง JavaScript ซ่อน/แสดง Button

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

<script>
    function showAndHide() {
        var txt = document.getElementById("txt");
        if( txt.style.display === "none" ) {
            txt.style.display = "block";
        } else {
            txt.style.display = "none";
        }        
    }
</script>

1. สร้าง TextBox กำหนดค่า id เท่ากับ txt และปุ่มกด Button เมื่อผู้ใช้งานกดจะเรียกใช้ฟังก์ชัน showAndHide

2. ฟังก์ชัน showAndHide จะอ้างถึง id txt และใช้คำสั่ง if - else ในการสร้างเงื่อนไขสำหรับ ซ่อน/แสดง

3. กรณีถ้า TextBox id = txt ถูกซ่อนอยู่ style.display จะเท่ากับ none โค้ดจะเปลี่ยนให้เป็น block (จากซ่อน เปลี่ยนเป็นแสดง)

4. กรณีถ้า TextBox id = txt แสดงอยู่ style.display จะเท่ากับ block โค้ดจะเปลี่ยนให้เป็น none (จากแสดง เปลี่ยนเป็นซ่อน)