Butang untuk Menyembunyikan dan Menunjukkan Elemen dalam JavaScript

Dalam bahagian ini, kita akan belajar menyembunyikan dan menunjukkan elemen halaman. Seperti biasa, mari kita mulakan dengan sesuatu yang mudah, dan secara beransur-ansur meningkatkannya.

Sebagai pemanas badan, katakan kita ada satu perenggan dan dua butang:

<p id="elem">teks</p>
<input type="submit" id="show" value="tunjukkan">
<input type="submit" id="hide" value="sembunyikan">

Dapatkan pautan kepada elemen kita dalam pembolehubah:

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

Sekarang mari kita buat supaya apabila diklik pada satu butang, perenggan kita disembunyikan, dan pada butang satu lagi - ditunjukkan. Untuk melakukan ini, kita akan memberikan atau mengalih keluar kelas CSS yang sepadan daripada elemen:

.hidden {
	display: none;
}

Mari selesaikan tugas kita:

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

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

Ubah suai kod saya supaya hanya ada satu butang. Biarkan pada klik pertama pada butang ini elemen ditunjukkan, dan pada klik kedua - disembunyikan.