If/else Statment javascrip DOM

 

If/else Statment javascrip DOM

If/Else statement pada JavaScript merupakan sebuah pernyataan yang digunakan untuk mengeksekusi suatu kode jika kondisi tertentu terpenuhi, atau mengeksekusi kode lain jika kondisi tersebut tidak terpenuhi. Berikut adalah contoh penggunaan if/else statement pada JavaScript:

 let x = 10;

 f (x > 5) {

  console.log("x lebih besar dari 5");

} else {

  console.log("x tidak lebih besar dari 5");

}

Pada contoh di atas, jika nilai dari variabel x lebih besar dari 5, maka akan mencetak "x lebih besar dari 5" di console. Jika tidak, maka akan mencetak "x tidak lebih besar dari 5" di console.

Anda Juga Bisa Menerapkan pada DOM

If/Else statement pada JavaScript dapat digunakan untuk mengontrol elemen HTML melalui DOM (Document Object Model). DOM merupakan representasi struktur dokumen HTML dalam bentuk objek, sehingga Anda dapat mengakses dan mengubah elemen HTML melalui JavaScript.

Berikut adalah contoh penggunaan if/else statement pada JavaScript untuk mengontrol elemen HTML melalui DOM:

   

    <button id="btn-toggle">Toggle Visibility</button>

    <div id="text">Ini adalah teks</div>

    const btnToggle = document.getElementById("btn-toggle");

    const text = document.getElementById("text");

    btnToggle.addEventListener("click", function() {

    if (text.style.display === "none") {

        text.style.display = "block";

    } else {

        text.style.display = "none";

    }

    });

Pada contoh di atas, kita menambahkan event listener pada elemen button dengan id "btn-toggle", yang akan mengeksekusi suatu kode jika tombol tersebut diklik. Kode tersebut akan mengecek apakah elemen div dengan id "text" memiliki display "none" (tidak terlihat). Jika iya, maka akan mengubah display elemen tersebut menjadi "block" (terlihat). Jika tidak, maka akan mengubah display elemen tersebut menjadi "none" (tidak terlihat).

Anda juga dapat menggunakan if/else statement pada CSS untuk mengatur tampilan elemen HTML berdasarkan kondisi tertentu. Berikut adalah contoh penggunaannya:

  div {

  width: 100px;

  height: 100px;

}

#text.hidden {

  display: none;

}

    const text = document.getElementById("text");

    if (text.innerHTML === "Ini adalah teks") {

    text.classList.add("hidden");

    } else {

    text.classList.remove("hidden");

    }

Pada contoh di atas, kita mengecek apakah elemen div dengan id "text" memiliki innerHTML "Ini adalah teks". Jika iya, maka akan menambahkan kelas "hidden" pada elemen tersebut. Jika tidak, maka akan menghapus kelas "hidden" pada elemen tersebut.

Semoga membantu! Jika Anda memiliki pertanyaan lain, silakan tanyakan kembali.