javascript - 无限运行的随机 if 条件？

Question

您好，我正在用 JavaScript 制作一个问题表单，我正在尝试使其正常运行，以便问题始终运行，而不是以随机排序的顺序停在 4 处。因此，每次都会以随机顺序提出随机问题，永无止境。我正在循环 if 语句中运行我的代码。

var questionNum = 0;
var question = '<h1>What is your name?</h1>';

var output = document.getElementById('output');
output.innerHTML = question;

function bot() {
    var input = document.getElementById("input").value;
    console.log(input);

    if (questionNum == 0) {
      var audio = new Audio('music/openmind.ogg');
      audio.play();
    output.innerHTML = '<h1>Hello ' + input + '!</h1>';
    document.getElementById("input").value = "";
    question = '<h1>How old are you?</h1>';
    setTimeout(timedQuestion, 2000);
    }

    else if (questionNum == 1) {

    output.innerHTML = '<h1>That means you were born in ' + (2017 - input) + '.</h1>';
    document.getElementById("input").value = "";
    question = '<h1>where are you from?</h1>';
    setTimeout(timedQuestion, 2000);
    }

    else if (questionNum == 2) {
      var audio = new Audio('music/beone.ogg');
      audio.play();
      output.innerHTML =  '<h1>You are from ' + (input) + '.</h1>';
      document.getElementById("input").value = "";
      question = '<h1>Do you eat healthy?</h1>';
      setTimeout(timedQuestion, 2000);
    }

    else if (questionNum == 3) {
      var audio = new Audio('music/becoming.ogg');
      audio.play();
      output.innerHTML = '<h1>Acording to my data you are eating ' + (input) + ' and that is healthy!</h1>'


    }
}

function timedQuestion() {
    output.innerHTML = question;
}


$(document).keypress(function(e) {
  if (e.which == 13) {
    bot();
    questionNum++;
  }
});

body {
	background-color: #8dd8f8;
}

h1, p {

	text-align: center;
	color: #323330;
	font-size:  100px;
}


p {
	font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="well">
<div id="output"></div>
</div>

    <div class="col-md-2 col-md-offset-5">
			<div class="form-group">
			  <label>Responce:</label>
			  <input type="text" class="form-control" id="input" value="">
			</div>
		</div>




</div>

Answer 1

如果问题及其回答放在对象中而不是使用 if..else 结构，代码(和可维护性)将变得更加容易。也许我混淆了音频，但想法保持不变:每个对象都包含问题、可选音频文件和响应函数:

let questions = [
  {text:'What is your name?', audio:'music/openmind.ogg', response : input => 'Hello ' + input + '!' },
  {text:'How old are you?', response : input => 'That means you were born in ' + (2017 - input) + '.'},
  {text:'Where are you from?', audio:'music/beone.ogg', response: input => 'You are from ' + (input) + '.'},
  {text: 'Do you eat healthy?', audio: 'music/becoming.ogg', response: input => 'Acording to my data you are eating ' + (input) + ' and that is healthy!'}
 ];

let output = $('#output'),
    input = $("#input"),
    curQuestion;

function ask() {
  let qi = Math.floor(Math.random() *  questions.length); //depending on your needs, a check could be added if it's been asked directly before or only recycle questions when all are asked
  curQuestion = questions[qi];
  setOutput(curQuestion.text);
  input.val('');  
}

ask(); //first call

function respond(){
  let q = curQuestion;
  if(q.audio)
    new Audio(q.audio).play();
  setOutput(q.response(input.val()));
  setTimeout(ask, 2000);
}

function setOutput(txt){
  output.html($('<h1>').text(txt));
}

$(document).keypress(function(e) {
  if (e.which == 13) {
    respond();
    return false;
  }
});

body {
	background-color: #8dd8f8;
}

h1, p {

	text-align: center;
	color: #323330;
	font-size:  100px;
}


p {
	font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="well">
<div id="output"></div>
</div>

    <div class="col-md-2 col-md-offset-5">
			<div class="form-group">
			  <label>Responce:</label>
			  <input type="text" class="form-control" id="input" value="">
			</div>
		</div>




</div>