javascript - 当用户点击回车时，出现新的输入

Question

我正在开发一种 HTML 格式的“mad libs”类型的程序——基本上，用户会被问到一系列问题，点击提交后，脚本会打印出一个故事及其答案。

我该如何做到这一点，当用户写下他们的答案时，他们可以按下回车键并出现新问题？我希望问题一一揭晓——只有在用户回答了上一个问题之后。所以它有点类似于动画。有没有办法做到这一点？

window.writeValues = function(form) {
    var Greeting = form.Greeting.value;
    var fname = form.fname.value;
    var celebrity = form.celebrity.value;

    document.getElementById('RESULT').innerHTML = Greeting + " " + fname + " it's " + celebrity;
}

<form action="PayslipServlet" method="get">
  Please enter your First name: <input type="text" name="fname" id="fname"><br/> 
Please enter a celebrity:<input type="text" name="celebrity" id="celebrity"><br/> 
Please enter a greeting: <input type="text" name="Greeting" id="Greeting"><br/>

RESULT: <span id="RESULT"></span><br />
  <input type="button" value="Submit" onClick="writeValues(form)">. <input type="reset">

</form>

Answer 1

如果这正是您正在寻找的东西，那么这会起作用:(抱歉，它很长，我无法帮助自己为您完成，抱歉。:))

var questions = ["please enter your name", "please input a celeberaty", "please enter a greeting"]//questions
var answers = []
var question = 0//number of question you are on
var que = document.getElementById("question")
que.innerHTML = questions[question]
question++

    window.writeValues = function(form) {
        var myinput = document.getElementById("inpbox")//textbox you are getting input from
        var que = document.getElementById("question")
        
        answers.push(myinput.value)//input user input to list
           
        if (question !== 3/*length of list*/) {
          que.innerHTML = questions[question]
          question++
          console.log(question)
        }
        else {
          document.getElementById('RESULT').innerHTML = answers[0]/* get answer 1*/ + " " + answers[1] + " it's " + answers[2];
         }
 }
 
 window.res = function() {
   var myinput = document.getElementById("inpbox")
   question = 0
   que.innerHTML = questions[0]
   question++
   answers = []
   document.getElementById('RESULT').innerHTML = ""
   myinput.value = ""
 }
 window.addEventListener("keydown", function(event) {
 if(event.key == "Enter"){
  writeValues()
  }
 });//if press enter submit

<form action="PayslipServlet" method="get">
  <div id="question">please type your name:</div><input type="text" name="inpbox" id="inpbox"><br/> 


RESULT: <span id="RESULT"></span><br />
  <input type="button" value="Submit" onClick="writeValues(form)">. <button type="button" onClick="res()">reset</button>

</form>