Berikut ini adalah pertanyaan dari anzcodeoceanz pada mata pelajaran TI untuk jenjang Sekolah Menengah Atas
selectBtn = optionMenu.querySelector(".select-btn"),
options = optionMenu.querySelectorAll(".option"),
sBtn_text = optionMenu.querySelector(".btn-text");
selectBtn.addEventListener("click", () => optionMenu.classList.toggle("active"));
options.forEach(option =>{
option.addEventListener("click", () =>{
let selectedOption = option.querySelector(".option-text").innerText;
sBtn_text.innerText = selectedOption;
console.log(selectedOption)
})
});
const optionMenu2 = document.querySelector(".select-menu2"),
selectBtn = optionMenu2.querySelector(".select-btn2"),
options2 = optionMenu2.querySelectorAll(".option2"),
sBtn_text2 = optionMenu2.querySelector(".btn-text2");
selectBtn.addEventListener("click", () => optionMenu2.classList.toggle("active"));
options2.forEach(option =>{
option.addEventListener("click", () =>{
let selectedOption = option.querySelector(".option-text2").innerText;
sBtn_text2.innerText = selectedOption;
console.log(selectedOption)
})
});
kenapa tidak jalan ya, select optionnya tidak jalan
Jawaban dan Penjelasan
Berikut ini adalah pilihan jawaban terbaik dari pertanyaan diatas.
Pada script tersebut, Anda memiliki dua variabel yang menggunakan nama yang sama, yaitu selectBtn. Hal ini dapat menyebabkan konflik pada program, sehingga fungsi event listener tidak dapat dijalankan.
Anda dapat mencoba mengubah nama variabel selectBtn pada blok kode kedua menjadi selectBtn2 agar tidak terjadi konflik dengan variabel pada blok kode pertama.
Berikut adalah contoh dari script yang telah diperbaiki:
const optionMenu = document.querySelector(".select-menu"),
selectBtn = optionMenu.querySelector(".select-btn"),
options = optionMenu.querySelectorAll(".option"),
sBtn_text = optionMenu.querySelector(".btn-text");
selectBtn.addEventListener("click", () => optionMenu.classList.toggle("active"));
options.forEach(option => {
option.addEventListener("click", () => {
let selectedOption = option.querySelector(".option-text").innerText;
sBtn_text.innerText = selectedOption;
console.log(selectedOption)
})
});
const optionMenu2 = document.querySelector(".select-menu2"),
selectBtn2 = optionMenu2.querySelector(".select-btn2"), // ubah nama variabel selectBtn menjadi selectBtn2
options2 = optionMenu2.querySelectorAll(".option2"),
sBtn_text2 = optionMenu2.querySelector(".btn-text2");
selectBtn2.addEventListener("click", () => optionMenu2.classList.toggle("active"));
options2.forEach(option => {
option.addEventListener("click", () => {
let selectedOption = option.querySelector(".option-text2").innerText;
sBtn_text2.innerText = selectedOption;
console.log(selectedOption)
})
});
semoga membantu
Semoga dengan pertanyaan yang sudah terjawab oleh LastOprekersz123 dapat membantu memudahkan mengerjakan soal, tugas dan PR sekolah kalian.
Apabila terdapat kesalahan dalam mengerjakan soal, silahkan koreksi jawaban dengan mengirimkan email ke yomemimo.com melalui halaman Contact
Last Update: Fri, 19 May 23