जावास्क्रिप्ट: प्रश्नोत्तरी कार्यक्रम: दूसरा प्रश्न लोड नहीं करता है

Question

मैं सीखने की प्रक्रिया के हिस्से के रूप में जावास्क्रिप्ट सीख रहा हूं और एक प्रश्नोत्तरी कार्यक्रम लिख रहा हूं।

<!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>

जब मैं पृष्ठ लोड करता हूं, populateQuestion() डिफ़ॉल्ट प्रश्न और विकल्प (defQuestions सरणी का पहला तत्व) निष्पादित और लोड किया जाता है। यह हिस्सा ठीक काम कर रहा है।

जब मैं Submit बटन पर क्लिक करता हूं, तो अगला प्रश्न लोड होना चाहिए। लेकिन अगला प्रश्न लोड नहीं हो रहा है।

console.log(quesIndex); केवल 0 प्रिंट करता है और फिर कंसोल विंडो लॉग क्लियर करता है।

क्या कार्यान्वयन में कुछ गड़बड़ है?

javascript html

0

Nayab Basha Sayed 27 अक्टूबर 2019, 18:39

Answer 1

मुझे यकीन नहीं है कि आप फ़ॉर्म सबमिशन को कैसे संसाधित करना चाहते हैं, लेकिन आपका वर्तमान कार्यान्वयन फ़ॉर्म सबमिट करेगा जिससे पृष्ठ पुनः लोड हो जाएगा और आप स्क्रिप्ट को रीसेट कर देंगे।

आपको फ़ॉर्म सबमिशन ईवेंट के लिए कैप्चर करने के लिए एक ईवेंट श्रोता जोड़ना चाहिए और इसे स्वयं संसाधित करना चाहिए (मुझे उम्मीद है कि आप उपयोगकर्ताओं को दिए गए उत्तरों को एक सरणी में संग्रहीत करेंगे)

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 अक्टूबर 2019, 16:15

Answer 2

यहां संशोधित कोड है, यह jsfiddle.net में काम करता है। तो, मूल रूप से आपको एक नया प्रश्न प्रस्तुत करने से पहले quesIndex को अपडेट करना होगा।

    <!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 अक्टूबर 2019, 03:16

Answer 3

अपने फॉर्म में एक आईडी और फॉर्म पर एक ऑन सबमिट इवेंट श्रोता संलग्न करने का प्रयास करें और फॉर्म के डिफ़ॉल्ट व्यवहार को रोकने के लिए अपने फॉर्म को पेज को फिर से लोड करने से रोकें और वहां अपना तर्क दें।

1

Ali 27 अक्टूबर 2019, 16:06

Answer 4

यदि आप कोई फॉर्म सबमिट करते हैं तो यह पेज को फिर से लोड कर रहा है और पहले प्रश्न के साथ फिर से शुरू होता है। इसे बदलें

<form type="submit" onsubmit = "populateQuestion()">
प्रति <form type="submit">
तथा <button type = "submit">Submit</button>
प्रति <button type = "button" onclick="populateQuestion()">Submit</button>

इस तरह:

        <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 अक्टूबर 2019, 16:21

जावास्क्रिप्ट: प्रश्नोत्तरी कार्यक्रम: दूसरा प्रश्न लोड नहीं करता है

4 जवाब

संबंधित सवाल

नए सवाल