当用户点击Enter时，出现新输入

debugcn 发表于 Dev

凯拉

我正在用HTML编写“疯狂的图书馆”类型的程序-基本上会向用户询问一系列问题，并在单击“提交”后，脚本会打印出一个带有其答案的故事。

我如何做到这一点，以便当用户写下答案时，他们可以按Enter键，并且会出现新问题？我希望仅在用户回答上一个问题后才逐个显示问题。因此，它有点类似于动画。有没有办法做到这一点？

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>

脚本

如果您要的是这种方法，它就可以工作：（很长很抱歉，抱歉，我帮不了我，：。）

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。