ปุ่มสำหรับซ่อนและแสดงองค์ประกอบด้วย JavaScript

ในส่วนนี้เราจะเรียนรู้วิธีการซ่อน และแสดงองค์ประกอบบนหน้าเว็บ ตามปกติ เริ่มจากสิ่งที่ง่ายก่อน แล้วค่อย ๆ เพิ่มความซับซ้อนขึ้น

เพื่อเป็นการวอร์มอัพ ลองสมมติว่ามีย่อหน้าและปุ่มสองปุ่ม:

<p id="elem">text</p>
<input type="submit" id="show" value="show">
<input type="submit" id="hide" value="hide">

นำอ้างอิงไปยังองค์ประกอบของเรามาเก็บในตัวแปร:

let elem = document.querySelector('#elem');
let show = document.querySelector('#show');
let hide = document.querySelector('#hide');

ตอนนี้มาทำให้เมื่อคลิกที่ปุ่มหนึ่ง ย่อหน้าของเราจะถูกซ่อน และเมื่อคลิกอีกปุ่มหนึ่ง - จะถูกแสดงกัน โดยเราจะเพิ่มหรือลบ คลาส CSS ที่เกี่ยวข้องออกจากองค์ประกอบ:

.hidden {
	display: none;
}

มาแก้ไขงานของเรากัน:

hide.addEventListener('click', function() {
	elem.classList.add('hidden');
});

show.addEventListener('click', function() {
	elem.classList.remove('hidden');
});

ปรับเปลี่ยนโค้ดของฉันเพื่อให้มีเพียง ปุ่มเดียว โดยให้เมื่อคลิกครั้งแรกที่ปุ่มนี้ องค์ประกอบจะถูกแสดง และเมื่อคลิกครั้งที่สอง - จะถูกซ่อน