ซ่อนข้อความ HTML แบบปุ่ม spoil ด้วย JavaScript

สอนเขียนโค้ดซ่อนข้อความ HTML แบบปุ่ม spoil ด้วยภาษา JavaScript โดยใช้คำสั่ง display เพื่อกำหนดว่าจะแสดง (block) หรือซ่อน (none) โดยทำงานผ่าน input button ด้วยคำสั่ง onclick สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง ซ่อนข้อความ HTML แบบปุ่ม spoil ด้วย JavaScript

<div id="spoil" style="display:none">สวัสดี ผม Devdit</div>
<input type="button" id="btn" onclick="spoil()" value="แสดงข้อความ">

<script>
    function spoil() {
        var element = document.getElementById("spoil");
        var btn = document.getElementById("btn");
        if( element.style.display == "none" ) {
            element.style.display = "block";
            btn.value = "ซ่อนข้อความ";
        } else {
            element.style.display = "none";
            btn.value = "แสดงข้อความ";
        }
    }
</script>

1. สร้าง div id="spoil" กำหนดให้ซ่อน ด้วย display:none โดย div นี้จะวางเนื้อหา หรือข้อความที่เป็น spoil

2. ใช้คำสั่ง onclick กับ input button เมื่อผู้ใช้งานกดปุ่มจะเรียกใช้ ฟังก์ชัน spoil ในภาษา JavaScript

3. ภายในฟังก์ชัน spoil อ้างถึง elements 2 ตัว คือ element อ้างถึง id="spoil" และ btn อ้างถึง id="btn"

4. กรณีถ้า id="spoil" มีค่าเท่ากับ none หรือถูกซ่อนอยู่ให้เปลี่ยนเป็นแสดงด้วยคำสั่ง style.display = "block" และเปลี่ยนข้อความปุ่ม เป็น “ซ่อนข้อความ”

5. กรณีถ้า id="spoil" มีค่าเท่ากับ block หรือแสดงอยู่ให้เปลี่ยนเป็นซ่อนด้วยคำสั่ง style.display = "none" และเปลี่ยนข้อความปุ่ม เป็น “แสดงข้อความ”