Question

我试图进行一次测验，一次显示一个问题，然后提交答案＆＃34;按钮单击，该按钮验证答案（正确或错误），并用新的问题替换上一个问题。我想知道的是;如何在点击按钮时替换问题？

以下是我的代码片段：

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

我尝试过使用if语句，但它没有用。我非常感谢你的帮助，因为我对html和js的了解非常基础。提前谢谢！

Answer 1

这就是你的代码应该是这样的：

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>

更改清单：

从表单标记

style="display: none;"

添加了JavaScript来处理更改问题和答案
在span标签之间放置答案，并为他们添加了一类“答案”，使其易于访问

Answer 2

您可以使用以下内容替换内容：

function replace(){

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

}

如果你需要通过className获取元素，你可以使用：

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

HTML - 替换按钮单击时的值

2 个答案: