Question

当我尝试将一系列问题写入文档时，尝试正确地遍历一系列问题时遇到问题。我下面包含的第一段代码本质上是我要实现的目标，只是我希望没有提示。我创建了一个名为question[]的数组，该数组现在存储3个问题字符串。带有prompt(question[i])的for循环获取question[]中的每个问题，并提示用户回答。然后，它将值推入我创建的另一个名为character[]的数组。

我尝试了几种不同的方法来使用.append方法来完成此操作，但不幸的是没有用，我认为我可以将我的陷阱定位到几个不同的领域。
在最后的代码块中，我试图将question[]中的问题附加到页面上，然后让文档监听要更改的输入值或按下Enter键（键13）。另外，让我知道我将所有这些都包装在以下函数中：
$(document).ready(function(){...}

var question = [
    '<br> What is your name?',
    '<br> Are you man or woman?',
    '<br> What is your class?'
];   
var character = [];

//For Loop Using prompt()
for (i = 0; i < question.length; i++) {
     var input = prompt(question[i]);
     character.push(input);
     alert(character[i]);
}

//For Loop Attempting to Use HTML '<input>'
<input id="user-input" placeholder="Type Here"></input>

for (i = 0; i < question.length; i++) {
    $('#game-text').append(question[i]);
    $('#user-input').onchange = function() {
        var userInput = input.value;
        character.push(userInput);
    }
}

OR

for (i = 0; i < question.length; i++) {
    $('#game-text').append(question[i]);
    $(document).keypress(function(key){
    if(key.which === 13 && $('#user-input').is(':focus')) {
        var input = $('#user-input').val();
        character.push(input);
    }
})

我不会让循环一次显示一个问题，而是让循环一次显示所有问题，而且似乎也无法将其吸收到用户输入中。
我真的不确定如何处理方法或确切缺少的知识是什么，因为我似乎无法在网上找到答案。

再次总结一下我的问题是：
如何从页面本身的数组中提出问题，让页面等待响应，将响应存储在另一个数组中，然后再次执行此操作，直到遍历整个数组？
非常感谢您的参与！我非常感谢您的帮助！

Answer 1

您可以使用递归方法，将逻辑包装在函数中询问问题，完成此过程后，再对下一个问题再次调用此函数。请注意，在所有过程结束时，我都删除了警告对话框，并用console.log()替换了它们，只是为了稍微清除一下逻辑。

var question = [
    '<br> What is your name?',
    '<br> Are you man or woman?',
    '<br> What is your class?'
];
var character = [];

const askQuestion = (idx) =>
{
    if (idx >= question.length)
    {
        console.log(character);
        return;
    }

    character.push(prompt(question[idx]));
    askQuestion(idx + 1);
}

askQuestion(0);

Answer 2

由于您希望在页面本身上获得调查表（无提示），因此可以使用jQuery事件来控制主页上问题的闪烁，也可以将答案顺序记录在数组中。您可以执行以下操作：

var question = [
  'What is your name?',
  'Are you man or woman?',
  'What is your class?'
];
var i = 0;
var ans = [];

$(document).ready(function() {
  $("#ques").html(question[i]);
});

$("#answer").click(function() {
  ans.push($("#ans").val());
  $("#ans").val("");
  i++;
  $("#ques").html(question[i]);
  $("#answered").html(JSON.stringify(ans));
  if (i == question.length) {
    $("#ans").hide();
    $("#answer").hide();
    $("#ques").html("You've answered all the questions!");
  }
});

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>
    <div id="ques"></div>
    <input type="text" id="ans" placeholder="Your Answer">
    <button id="answer">Answer</button>
    <pre id="answered"></pre>
    <script src="script.js"></script>
  </body>
</html>

如何遍历一系列问题并存储在一系列用户输入中？

2 个答案: