Pada kesempatan kali ini, kita akan membuat tombol yang mana dapat digunakan untuk menghilangkan elemen tertentu pada halaman HTML, dan tombol yang lain yang dapat digunakan untuk memunculkan kembali elemen yang telah dihilangkan sebelumnya.

Membuat Kotak

Kotak ini yang akan menjadi elemen yang akan dihilangkan dan dimunculkan kembali. Elemen kotak ditempatkan di dalam sebuah elemen lain dengan nama class "container". Elemen "container" ini bersifat optional. Elemen ini dibuat agar tidak terjadi pergeseran elemen pada saat elemen kotak dihilangkan.

Berikut adalah penulisan program HTML

<div class="container"> <div id="kotak" class="contoh"> <p>Pilih Warna</p> </div> </div>

Berikut adalah penulisan style elemen kotak pada CSS dengan nama class "contoh"

.contoh{ width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; text-align: center; background-color: lightgray; }

Membuat Tombol

Selanjutnya adalah membuat tombol yang nantinya digunakan untuk menghilangkan dan memunculkan kembali elemen kotak.

Berikut adalah penulisan program pada HTML untuk elemen tombol yang mana menjalankan fungsi menghilangkan elemen kotak.

<button onclick="sembunyi()">Sembunyikan</button>

Berikut adalah penulisan program pada HTML untuk elemen tombol yang mana menjalankan fungsi memunculkan kembali elemen kotak.

<button onclick="muncul()">Munculkan</button>

Deklarasi kotak

Untuk kotak dapat dihilangkan dengan javascript, elemen kotak tersebut perlu untuk dideklarasikan terlebih dahulu. Deklarasi dilakukan agar elemen dapat dikenali pada Javascript.

Berikut adalah penulisan program untuk deklarasi elemen kotak pada Javascript.

var id_kotak = document.getElementById("kotak");

Deklarasi Fungsi

Fungsi berisi perintah yang akan dijalankan. Fungsi pertama yang akan dibuat adalah fungsi yang dapat menyembunyikan elemen pada saat dijalankan. Fungsi kedua adalah fungsi yang dapat menampilkan kembali elemen yang telah disembunyikan sebelumnya.

Berikut adalah penulisan program untuk fungsi pertama pada javascript. Fungsi pertama ini digunakan untuk menyembunyikan elemen kotak.

function sembunyi(){ id_kotak.style.display = "none"; }

Berikut adalah penulisan program untuk fungsi kedua pada javascript. Fungsi kedua ini digunakan untuk menampilkan kembali elemen kotak.

function muncul(){ id_kotak.style.display = "flex"; }

Hasil

Berikut tampilan kotak, tombol pemicunya yang telah dibuat beserta fungsinya masing-masing. Selamat mencoba

Lihat juga:

Sekian, Semoga bermanfaat