I am a javascript beginner, I have a multiple choice exam project where I want to get response data for each selected answer. I can do it by typing the code manually but I want to make the code efficient because the data can be more than 50 questions.

heres my best code .

var i;
    for (i = 1; i <= <?= session()->get('participant')['jml_soal'] ?>; i  ) {
        window['radio'   i] = document.querySelectorAll("input[name='optionTrue"   i   "']");
        window['rubahtombol'   i] = document.getElementById("buton"   i);
    }

    let findSe = () => {
        let selected = document.querySelector("input[name='optionTrue1']:checked").value;
        var soalId = document.getElementById("idSoal1").value;
        var opsiPilih = document.getElementById("jawaban"   selected).textContent
        document.getElementById("pilihan1").textContent = ". "   opsiPilih;
        rubahtombol1.classList.remove("btn-secondary");
        rubahtombol1.classList.add("btn-primary")
    }
    let findSe1 = () => {
        let selected = document.querySelector("input[name='optionTrue2']:checked").value;
        var soalId = document.getElementById("idSoal2").value;
        var opsiPilih = document.getElementById("jawaban"   selected).textContent
        document.getElementById("pilihan2").textContent = ". "   opsiPilih;
        rubahtombol2.classList.remove("btn-secondary");
        rubahtombol2.classList.add("btn-primary")
    }

    radio1.forEach(radioBtn => {
        radioBtn.addEventListener("change", findSe1);
    });
    radio2.forEach(radioBtn1 => {
        radioBtn1.addEventListener("change", findSe2);
    });
    findSe1();
    findSe2();

i'm trying to do this but not working

var i;
    for (i = 1; i <= <?= session()->get('participant')['jml_soal'] ?>; i  ) {
        window['radio'   i] = document.querySelectorAll("input[name='optionTrue"   i   "']");
        window['rubahtombol'   i] = document.getElementById("buton"   i);
        window['findSe'   i] = () => {
            let selected = document.querySelector("input[name='optionTrue1']:checked").value;
            var soalId = document.getElementById("idSoal1").value;
            console.log(selected);
            var opsiPilih = document.getElementById("jawaban"   selected).textContent
            console.log("aku pilih:"   opsiPilih);
            console.log("id saol:"   soalId);
            document.getElementById("pilihan1").textContent = ". "   opsiPilih;
            window['rubahtombol' i.classList.remove("btn-secondary")];
            window['rubahtombol' i.classList.add("btn-primary")];
        }
    }
    radio1.forEach(radioBtn => {
        radioBtn.addEventListener("change", findSe1);
    });
    radio2.forEach(radioBtn1 => {
        radioBtn1.addEventListener("change", findSe2);
    });
    findSe1();
    findSe2();

what i imagine is, i want do that in one looping

CodePudding user response：

Your second approach looks pretty close, but you need to make i local to the loop body. See JavaScript closure inside loops – simple practical example

But you can make it a little cleaner with OOP.

class Button {
    contructor(i) {
        this.index = i;
        this.radio = document.querySelectorAll(`input[name='optionTrue${i}']`);
        this.rumbahtombol = document.getElementById("buton"   i);
        this.radio.addEventListener("change", this.findSe.bind(this));
    }

    findSe() {
        let selected = document.querySelector(`input[name='optionTrue${this.index}']:checked`).value;
        let soalId = document.getElementById(`idSoal${this.index}`).value;
        let opsiPilih = document.getElementById("jawaban"   selected).textContent;
        document.getElementById(`pilihan${this.index}`).textContent = ". "   opsiPilih;
        this.rubahtombol.classList.remove("btn-secondary");
        this.rubahtombol.classList.add("btn-primary")
    }
}

for (let i = 1; i <= <?= session()->get('participant')['jml_soal'] ?>; i  ) {
    new Button(i);
}

CodePudding user response：

i did a little change from the code made by @Barmar and it worked

class Button {
    contructor(i) {
        let radio = [];
        this.index = i;
        radio[i] = document.querySelectorAll(`input[name='optionTrue`   i   `']`);
        radio[i].forEach(radioBtn => {
            radioBtn.addEventListener("change", this.findSe.bind(this));
        });
    }

    findSe() {
        let rubahtombol = []
        let selected = document.querySelector(`input[name='optionTrue${this.index}']:checked`).value;
        let soalId = document.getElementById(`idSoal${this.index}`).value;
        let opsiPilih = document.getElementById("jawaban"   selected).textContent;
        document.getElementById(`pilihan${this.index}`).textContent = ". "   opsiPilih;
        rubahtombol = document.getElementById(`buton${this.index}`);
        rubahtombol.classList.remove("btn-secondary");
        rubahtombol.classList.add("btn-primary")
    }
}

for (let i = 1; i <= <?= session()->get('participant')['jml_soal'] ?>; i  ) {
    new Button(i).contructor(i);
}