Pembahasan dan Kunci Jawaban: DOM dan Event Handling

Berikut adalah pembahasan dan kunci jawaban dari soal latihan topik DOM dan Event Handling yang bisa langsung kamu jadikan lanjutan artikel blog.

Berikut adalah pembahasan dan kunci jawaban dari soal latihan topik DOM dan Event Handling yang bisa langsung kamu jadikan lanjutan artikel blog.

✅ Pembahasan dan Kunci Jawaban: DOM dan Event Handling

Artikel ini merupakan lanjutan dari topik sebelumnya yang membahas DOM dan Event Handling dalam JavaScript. Jika kamu belum mengerjakan latihan soalnya, sebaiknya kembali ke bagian sebelumnya. Di bawah ini adalah jawaban dan penjelasan dari setiap soal latihan.

🟦 Bagian A: Pilihan Ganda

1. c. Mengambil elemen dengan id judul dari DOM 📘 Penjelasan: document.getElementById() digunakan untuk mengambil referensi ke elemen HTML berdasarkan nilai id.

2. c. Menampilkan alert saat tombol diklik 📘 Penjelasan: addEventListener("click", callback) digunakan untuk menangani event klik pada tombol, dan menjalankan fungsi ketika event terjadi.

3. a. innerText 📘 Penjelasan: innerText digunakan untuk membaca atau mengubah teks yang ada dalam suatu elemen HTML.

4. d. Di akhir tag <body> atau setelah event DOMContentLoaded 📘 Penjelasan: Ini memastikan bahwa elemen DOM sudah dimuat sepenuhnya sebelum JavaScript dijalankan.

5. b.

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

📘 Penjelasan: Ini adalah cara yang benar untuk mengambil nilai input dan menampilkannya ke elemen lain setelah tombol diklik.

🟩 Bagian B: Isian Singkat

1document.getElementById("teks").innerText = "Selamat datang di JavaScript!";
2

1document.getElementById("teks").innerText = "Selamat datang di JavaScript!";
2

📘 Penjelasan: Mengakses elemen berdasarkan ID dan mengubah teks di dalamnya.

1document.getElementById("gambar").addEventListener("mouseover", function () {
2  console.log("Mouse masuk!");
3});
4

1document.getElementById("gambar").addEventListener("mouseover", function () {
2  console.log("Mouse masuk!");
3});
4

📘 Penjelasan: mouseover digunakan untuk mendeteksi saat mouse menyentuh elemen tertentu.

8. innerText hanya mengubah teks biasa dan mengabaikan tag HTML. innerHTML memungkinkan menyisipkan atau membaca konten dengan tag HTML di dalamnya.

🟨 Bagian C: Praktik Kode

HTML:

1<input type="text" id="nama" />
2<button id="tampilkan">Tampilkan</button>
3<div id="output"></div>
4

1<input type="text" id="nama" />
2<button id="tampilkan">Tampilkan</button>
3<div id="output"></div>
4

JavaScript:

1document.getElementById("tampilkan").addEventListener("click", function () {
2  const nama = document.getElementById("nama").value;
3  document.getElementById("output").innerText = nama;
4});
5

1document.getElementById("tampilkan").addEventListener("click", function () {
2  const nama = document.getElementById("nama").value;
3  document.getElementById("output").innerText = nama;
4});
5

📘 Penjelasan: Mengambil nilai input dan menampilkannya ke elemen lain saat tombol ditekan.

10.

HTML:

1<button id="ubahWarna">Ubah Warna</button>
2

1<button id="ubahWarna">Ubah Warna</button>
2

JavaScript:

1document.getElementById("ubahWarna").addEventListener("click", function () {
2  const warna = "#" + Math.floor(Math.random() * 16777215).toString(16);
3  document.body.style.backgroundColor = warna;
4});
5

1document.getElementById("ubahWarna").addEventListener("click", function () {
2  const warna = "#" + Math.floor(Math.random() * 16777215).toString(16);
3  document.body.style.backgroundColor = warna;
4});
5

📘 Penjelasan: Kode ini menghasilkan warna acak dengan mengonversi angka ke format hex, lalu menetapkannya sebagai warna latar belakang.

Dengan memahami dan mengerjakan soal-soal di atas, kamu sudah selangkah lebih maju dalam menguasai dasar interaksi antarmuka pengguna dengan JavaScript.

programming

html

javascript

Pembahasan dan Kunci Jawaban: DOM dan Event Handling

Berikut adalah pembahasan dan kunci jawaban dari soal latihan topik DOM dan Event Handling yang bisa langsung kamu jadikan lanjutan artikel blog.

✅ Pembahasan dan Kunci Jawaban: DOM dan Event Handling

🟦 Bagian A: Pilihan Ganda

🟩 Bagian B: Isian Singkat

🟨 Bagian C: Praktik Kode

HTML:

JavaScript:

HTML:

JavaScript:

Latest Articles

Top Neighborhoods to Invest in Dubai Real Estate in 2025

Organic Wine Brands with Clean Ingredients and Bold Flavors

Why Web3 Games Need Wallets: Explained for Beginners