Latihan Soal: DOM dan Event Handling

Berikut adalah latihan soal untuk topik DOM dan Event Handling dalam JavaScript. Soal-soal ini dirancang agar kamu bisa memahami konsep interaksi pengguna dan manipulasi elemen HTML secara dinamis.

Berikut adalah latihan soal untuk topik DOM dan Event Handling dalam JavaScript. Soal-soal ini dirancang agar kamu bisa memahami konsep interaksi pengguna dan manipulasi elemen HTML secara dinamis.

🧪 Latihan Soal: DOM dan Event Handling

Petunjuk:

Baca soal dengan cermat.
Coba jalankan langsung di browser atau code playground.
Pastikan kamu memahami cara kerja event dan manipulasi DOM.

🟦 Bagian A: Pilihan Ganda

1. Apa fungsi dari document.getElementById("judul")?

a. Menghapus elemen dengan id judul b. Menambahkan elemen baru ke dalam HTML c. Mengambil elemen dengan id judul dari DOM d. Mengganti id elemen menjadi judul

2. Apa yang akan terjadi ketika kode berikut dijalankan?

1let tombol = document.getElementById("klik");
2tombol.addEventListener("click", function () {
3  alert("Tombol diklik!");
4});
5

1let tombol = document.getElementById("klik");
2tombol.addEventListener("click", function () {
3  alert("Tombol diklik!");
4});
5

a. Error karena addEventListener tidak dikenali b. Menampilkan alert saat halaman dibuka c. Menampilkan alert saat tombol diklik d. Tidak terjadi apa-apa

3. Metode apa yang digunakan untuk mengubah isi teks dari sebuah elemen?

a. innerText b. setText() c. textContent() d. textValue

4. Kapan waktu yang tepat untuk menjalankan JavaScript agar tidak error karena elemen DOM belum dimuat?

a. Sebelum tag <html> b. Di dalam tag <head> c. Setelah tag <body> d. Di akhir tag <body> atau setelah event DOMContentLoaded

5. Perhatikan HTML berikut:

1<input type="text" id="nama" />
2<button id="kirim">Kirim</button>
3<p id="hasil"></p>
4

1<input type="text" id="nama" />
2<button id="kirim">Kirim</button>
3<p id="hasil"></p>
4

Manakah kode JavaScript yang tepat untuk menampilkan isi input ke dalam elemen <p> saat tombol diklik?

1document.getElementById("hasil").innerText = nama.value;
2

1document.getElementById("hasil").innerText = nama.value;
2

1kirim.addEventListener("click", function () {
2  hasil.innerText = document.getElementById("nama").value;
3});
4

1kirim.addEventListener("click", function () {
2  hasil.innerText = document.getElementById("nama").value;
3});
4

1input.value = hasil;
2

1input.value = hasil;
2

1nama.innerText = hasil.value;
2

1nama.innerText = hasil.value;
2

🟩 Bagian B: Isian Singkat

6. Tulis kode JavaScript untuk mengubah isi elemen dengan id teks menjadi "Selamat datang di JavaScript!"

7. Tulis kode yang akan menambahkan event mouseover ke elemen dengan id gambar, lalu menampilkan teks “Mouse masuk!” di konsol.

8. Apa perbedaan utama antara innerText dan innerHTML?

🟨 Bagian C: Praktik Kode

9. Buatlah form sederhana yang memiliki satu input teks dan satu tombol. Ketika tombol ditekan, isi dari input ditampilkan di elemen <div id="output">.

10. Buat sebuah tombol yang jika diklik akan membuat warna background halaman berubah secara acak.

programming

html

javascript

Latihan Soal: DOM dan Event Handling

Berikut adalah latihan soal untuk topik DOM dan Event Handling dalam JavaScript. Soal-soal ini dirancang agar kamu bisa memahami konsep interaksi pengguna dan manipulasi elemen HTML secara dinamis.