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

Question

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

我已经尝试了几种不同的方法来使用 .append 方法完成此操作，但不幸的是无济于事，我想我可以将我的陷阱找出几个不同的领域。
在最后的代码块中，我试图将 question[] 中的问题附加到页面上，然后让文档监听要更改的输入值，或者 Enter(键13) 被压制。 另外，让大家知道我已将所有这些包装在以下函数中:
$(文档).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);
    }
}

或

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