HTML - Ersetzen der Werte auf der Schaltfläche klicken

Question

Ich versuche, ein Quiz zu machen, wo es zu einem Zeitpunkt eine Frage angezeigt wird, und auf der „Eintragen Antwort“ Klick-Taste, die Taste bestätigt die Antwort (entweder richtig oder falsch) und auch ersetzt die vorherige Frage durch eine neue Frage. Was ich wissen will ist; Wie ersetzt man die Frage auf Knopfdruck?

Hier ist ein Ausschnitt aus meinem Code:

    <div id="quiz" style="display:none;"> 
         <div class="row"> 
          <div class="col-md-12"> 
           <h1>Quiz</h1> 
           <p id="question">Question 01 : this is where the queston will go</p> 
           <form name="feedback"> 
            <input type="radio" name="opt" id="opt_1"> ans 1 <br> 
            <input type="radio" name="opt" id="opt_2"> ans 2 <br> 
            <input type="radio" name="opt" id="opt_3"> ans 3 <br> 

            <p><span id="err" style="display: none;color: red;">Select an option</span></p> 
            <button id="submit_btn" value="Submit" onClick="submit()"></button> 
           </form> 
           <br> 
          </div> 
         </div> 

Ich habe versucht, eine if-Anweisung, aber es hat nicht funktioniert. Ich würde Ihre Hilfe sehr schätzen, da meine Kenntnisse über HTML und JS sehr grundlegend sind. Vielen Dank im Voraus!

Answer 1

Dies ist, was Ihr Code sollte wie folgt aussehen:

Liste der Änderungen

var questions = ["Question 1", "Question 2", "Question 3"]; //Array containing all your questions. Make sure to include the question that's already being displayed 
 

 
var possibleAnswers = [ 
 
    ["answer 1", "answer 2", "answer 3"], 
 
    ["answer 1", "answer 2", "answer 3"] 
 
]; //An array of arrays containing the answers to every question. Make sure the answers are in the same order as the questions 
 

 
var currentQuestion = 0; 
 

 
var question = $("#question"); 
 
var answers = $(".answer"); 
 
var button = $("#submit_btn"); 
 
var buttonAction = function() { 
 
    currentQuestion++; 
 
    question.text(questions[currentQuestion]); 
 

 
    for (var i = 0; i < answers.length; i++) { 
 
    answers[i].textContent = possibleAnswers[currentQuestion][i]; 
 
    } 
 
}; 
 

 
button.on("click", buttonAction);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="quiz"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <h1>Quiz</h1> 
 
     <p id="question">Question 01 : this is where the queston will go</p> 
 
     <form name="feedback"> 
 
     <input type="radio" name="opt" id="opt_1"> <span class="answer">ans 1 </span><br> 
 
     <input type="radio" name="opt" id="opt_2"> <span class="answer">ans 2 </span> <br> 
 
     <input type="radio" name="opt" id="opt_3"> <span class="answer">ans 3 </span> <br> 
 

 
     <p><span id="err" style="display: none;color: red;">Select an option</span></p> 
 
     <button id="submit_btn" value="Submit" onClick="submit()"></button> 
 
     </form> 
 
     <br> 
 
    </div> 
 
    </div>

:

• entfernt style="display: none;" von Formular-Tag
• Added JavaScript kümmern Ändern der Fragen und Antworten
• Platziert die Antworten zwischen span-Tags und hinzugefügt, um ihnen eine Klasse von „Antwort“, um sie leicht zugänglich zu machen

Answer 2

Sie den Inhalt mit diesem ersetzen:

function replace(){ 

var obj = document.getElementById("question"); 
obj.innerHTML="the_next_question"; 

} 

, wenn Sie das bekommen müssen Element von der Klasse Name, die Sie verwenden können:

document.getElementsByClassName("question")[0];