Question

我正在尝试根据之前的问题创建问答测验。因此，如果用户单击“是”，则上一个问题将从屏幕上消失，并且屏幕上会显示一个新问题，如果没有单击则会显示另一个问题。任何帮助深表感谢。谢谢。

代码：

<!DOCTYPE html>
<html>

<body>

<p>Is the answer to this question Yes or No?</p>
<button onclick="myFunction1()">Yes</button>
<button onclick="myFunction2()">No</button>
<p id="demo"></p>

<script>
function myFunction1() {
}
function myFunction1() {
}

</script>
</body>
</html>

Answer 1

最简单的方法是使用display css属性，如下所示：

<!DOCTYPE html>
<html>

  <body>
    <div id="first-question">
      <p>Is the answer to this question Yes or No?</p>
      <button onclick="myFunction('first-question', 'second-question-1')">Yes</button>
      <button onclick="myFunction('first-question', 'second-question-2')">No</button>
    </div>
    <div id="second-question-1" style="display: none;">
      <p>You have clicked "Yes"</p>
      <p>Return to the first question ?</p>
      <button onclick="myFunction('second-question-1', 'first-question')">Yes</button>
      <button onclick="">No</button>
    </div>
    <div id="second-question-2" style="display: none;">
      <p>You have clicked "No"</p>
     <p>Return to the first question ?</p>
      <button onclick="myFunction('second-question-2', 'first-question')">Yes</button>
      <button onclick="">No</button>
    </div>


    <script type="text/javascript">
      function myFunction (hide, show) {
        document.getElementById(hide).style.display = "none";
        document.getElementById(show).style.display = "block";
      }

    </script>
  </body>

</html>

更新：仅使用1个功能

多级答案取决于先前的查询

1 个答案: