Saya belajar javascript dan menulis program Kuis sebagai bagian dari proses pembelajaran.

<!DOCTYPE html> 
<html>          
        <head>  
                <meta charset="UTF-8">                                              
        </head> 
        <body>  
                <form type="submit" onsubmit = "populateQuestion()">                
                        <h2 id="question">Question goes here</h2>                   
                        <input name = "option" type="radio" value="A"><span id = "choiceA">First option here</span><br/>
                        <input name = "option" type="radio" value="B"><span id = "choiceB">Second option here</span><br/>
                        <input name = "option" type="radio" value="C"><span id = "choiceC">Third option here</span><br/>
                        <input name = "option" type="radio" value="D"><span id = "choiceD">Fourth option here</span><br/>
                        <button type = "submit">Submit</button>                     
                </form>                       
        </body>                                                                     

<script>
var question = document.getElementById("question");
var choiceA = document.getElementById("choiceA");
var choiceB = document.getElementById("choiceB");
var choiceC = document.getElementById("choiceC");
var choiceD = document.getElementById("choiceD");

var quesIndex = 0;
var defQuestions = [
        {
                question : "Q01?",
                choiceA : "A1",
                choiceB : "B1",
                choiceC : "C1",
                choiceD : "D1",
                answer : "A"
        },
        {
                question : "Q02?",
                choiceA : "A2",
                choiceB : "B2",
                choiceC : "C2",
                choiceD : "D2",
                answer : "A"

        },
        {
                question : "Q03?",
                choiceA : "A3",
                choiceB : "B3",
                choiceC : "C3",
                choiceD : "D3",
                answer : "B"

        },
        {
                question : "Q04?",
                choiceA : "A4",
                choiceB : "B4",
                choiceC : "C4",
                choiceD : "D4",
                answer : "B"

        }
];

function renderQuestion() {
        question.innerHTML = defQuestions[quesIndex].question;
        choiceA.innerHTML = defQuestions[quesIndex].choiceA;
        choiceB.innerHTML = defQuestions[quesIndex].choiceB;
        choiceC.innerHTML = defQuestions[quesIndex].choiceC;
        choiceD.innerHTML = defQuestions[quesIndex].choiceD;
}

function populateQuestion() {
        console.log(quesIndex);
        renderQuestion();
        quesIndex += 1;
}

populateQuestion();
</script>
</html> 

Saat saya memuat halaman, populateQuestion() mengeksekusi dan memuat pertanyaan dan opsi default (elemen pertama dari larik defQuestions). Bagian ini bekerja dengan baik.

Image

Ketika saya mengklik tombol Submit, pertanyaan berikutnya seharusnya dimuat. Tapi pertanyaan selanjutnya adalah tidak memuat.

console.log(quesIndex); hanya mencetak 0 dan kemudian membersihkan log jendela konsol.

Apakah ada yang salah dalam pelaksanaannya?

0
Nayab Basha Sayed 27 Oktober 2019, 18:39

4 jawaban

Jawaban Terbaik

Saya tidak yakin bagaimana Anda ingin memproses pengiriman formulir tetapi implementasi Anda saat ini akan mengirimkan formulir sehingga menyebabkan halaman dimuat ulang dan skrip Anda disetel ulang.

Anda harus menambahkan pendengar acara untuk menangkap acara pengiriman formulir dan memprosesnya sendiri (saya berharap Anda akan menyimpan jawaban yang diberikan pengguna dalam array)

var question = document.getElementById("question");
var choiceA = document.getElementById("choiceA");
var choiceB = document.getElementById("choiceB");
var choiceC = document.getElementById("choiceC");
var choiceD = document.getElementById("choiceD");

var quesIndex = 0;
var defQuestions = [{
    question: "Q01?",
    choiceA: "A1",
    choiceB: "B1",
    choiceC: "C1",
    choiceD: "D1",
    answer: "A"
  },
  {
    question: "Q02?",
    choiceA: "A2",
    choiceB: "B2",
    choiceC: "C2",
    choiceD: "D2",
    answer: "A"

  },
  {
    question: "Q03?",
    choiceA: "A3",
    choiceB: "B3",
    choiceC: "C3",
    choiceD: "D3",
    answer: "B"

  },
  {
    question: "Q04?",
    choiceA: "A4",
    choiceB: "B4",
    choiceC: "C4",
    choiceD: "D4",
    answer: "B"

  }
];


var questionnaire = document.getElementById("questionnaire");

function renderQuestion() {
  question.innerHTML = defQuestions[quesIndex].question;
  choiceA.innerHTML = defQuestions[quesIndex].choiceA;
  choiceB.innerHTML = defQuestions[quesIndex].choiceB;
  choiceC.innerHTML = defQuestions[quesIndex].choiceC;
  choiceD.innerHTML = defQuestions[quesIndex].choiceD;
}

function populateQuestion() {
  console.log(quesIndex);
  renderQuestion();
  quesIndex += 1;
}

function onsubmit(e) {
  e.preventDefault(); //prevent form from actually posting
  var a = questionnaire.querySelector('input[name = option]:checked'); 
  
  console.clear();
  console.log("Q:",quesIndex,"Answer:",a.value);
  a.checked=false;//deselect it ready for new question
  populateQuestion();
}

questionnaire.addEventListener('submit', onsubmit, false);


populateQuestion();
form {
    margin-bottom:100px;/* just some space for the console log in the snippet*/
}
<form id="questionnaire" type="submit">
  <h2 id="question">Question goes here</h2>
  <input name="option" type="radio" value="A"><span id="choiceA">First option here</span><br/>
  <input name="option" type="radio" value="B"><span id="choiceB">Second option here</span><br/>
  <input name="option" type="radio" value="C"><span id="choiceC">Third option here</span><br/>
  <input name="option" type="radio" value="D" required><span id="choiceD">Fourth option here</span><br/>
  <button type="submit">Submit</button>
</form>
2
Moob 27 Oktober 2019, 16:15

Inilah kode yang direvisi, ini berfungsi di jsfiddle.net. Jadi, pada dasarnya Anda harus memperbarui quesIndex sebelum membuat pertanyaan baru.

    <!DOCTYPE html> 
<html>          
        <head>  
                <meta charset="UTF-8">                                              
        </head> 
        <body>  
                <form type="submit" onsubmit = "populateQuestion()">                
                        <h2 id="question">Question goes here</h2>                   
                        <input name = "option" type="radio" value="A"><span id = "choiceA">First option here</span><br/>
                        <input name = "option" type="radio" value="B"><span id = "choiceB">Second option here</span><br/>
                        <input name = "option" type="radio" value="C"><span id = "choiceC">Third option here</span><br/>
                        <input name = "option" type="radio" value="D"><span id = "choiceD">Fourth option here</span><br/>
                        <button type = "submit">Submit</button>                     
                </form>                       
        </body>                                                                     

<script>
var question = document.getElementById("question");
var choiceA = document.getElementById("choiceA");
var choiceB = document.getElementById("choiceB");
var choiceC = document.getElementById("choiceC");
var choiceD = document.getElementById("choiceD");

var quesIndex = 0;
var defQuestions = [
        {
                question : "Q01?",
                choiceA : "A1",
                choiceB : "B1",
                choiceC : "C1",
                choiceD : "D1",
                answer : "A"
        },
        {
                question : "Q02?",
                choiceA : "A2",
                choiceB : "B2",
                choiceC : "C2",
                choiceD : "D2",
                answer : "A"

        },
        {
                question : "Q03?",
                choiceA : "A3",
                choiceB : "B3",
                choiceC : "C3",
                choiceD : "D3",
                answer : "B"

        },
        {
                question : "Q04?",
                choiceA : "A4",
                choiceB : "B4",
                choiceC : "C4",
                choiceD : "D4",
                answer : "B"

        }
];

function renderQuestion() {
        question.innerHTML = defQuestions[quesIndex].question;
        choiceA.innerHTML = defQuestions[quesIndex].choiceA;
        choiceB.innerHTML = defQuestions[quesIndex].choiceB;
        choiceC.innerHTML = defQuestions[quesIndex].choiceC;
        choiceD.innerHTML = defQuestions[quesIndex].choiceD;
}

function populateQuestion() {
        console.log(quesIndex);
        quesIndex += 1;
        renderQuestion();
}

populateQuestion();
</script>
</html> 
-1
Von Uyvico 28 Oktober 2019, 03:16

Coba lampirkan id ke formulir Anda dan pendengar acara yang sedang dikirim pada formulir dan cegah perilaku default formulir agar formulir Anda tidak memuat ulang halaman dan lakukan logika Anda di sana.

1
Ali 27 Oktober 2019, 16:06

Jika Anda mengirimkan formulir maka itu memuat ulang Halaman dan mulai lagi dengan pertanyaan pertama. Ubah ini

<form type="submit" onsubmit = "populateQuestion()">
ke <form type="submit">
dan <button type = "submit">Submit</button>
ke <button type = "button" onclick="populateQuestion()">Submit</button>

Seperti ini:

        <form type="submit">                
                <h2 id="question">Question goes here</h2>                   
                <input name = "option" type="radio" value="A"><span id = "choiceA">First option here</span><br/>
                <input name = "option" type="radio" value="B"><span id = "choiceB">Second option here</span><br/>
                <input name = "option" type="radio" value="C"><span id = "choiceC">Third option here</span><br/>
                <input name = "option" type="radio" value="D"><span id = "choiceD">Fourth option here</span><br/>
                <button type = "button" onclick="populateQuestion()">Submit</button>                     
        </form> 
2
Mike 27 Oktober 2019, 16:21