Question

我正在用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>

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>

Answer 2

要做很多事情。

您需要隐藏除第一个问题以外的所有问题（通过CSS），然后在回答时将其显示出来。
我们需要找出下一个元素在哪里，以便我们可以显示它。
需要创建一个事件侦听器，以便在按下Enter键时执行正确的操作。
重置表单后，我们需要再次隐藏问题，并通过onreset()方法清除结果。

var getNextSibling = function (elem, selector) {
	var sibling = elem.nextElementSibling;

	while (sibling) {
		if (sibling.matches(selector)) return sibling;
		sibling = sibling.nextElementSibling
	}
};

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

  document.getElementById('RESULT').textContent = Greeting + " " + fname + " " + celebrity;
}

function resetQuestions() {
  var elements = questionForm.querySelectorAll("div.question-parent");
  
  elements.forEach(element => {
    element.removeAttribute('style');
  });
  
  document.getElementById("RESULT").textContent = "";
}

document.getElementById('questionForm').addEventListener('keypress', evt => {
    var keyCode = evt.keyCode || evt.which;
    if (keyCode == '13') {
    	var nextElement = getNextSibling(evt.target.parentNode, 'div');
    	if (nextElement) {
            nextElement.style.display = "block";
        return false;
      }
    }
});

form div:not(:first-child) {
  display: none;
}

<form id="questionForm" action="PayslipServlet" method="get" onreset="resetQuestions()">
  <div class="question-parent">
    Please enter your First name: <input type="text" name="fname" class="question">
  </div>
  <div class="question-parent">
    Please enter a celebrity:<input type="text" name="celebrity" class="question">
  </div>
  <div class="question-parent">
    Please enter a greeting: <input type="text" name="Greeting" class="question">
  </div>

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

</form>

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

2 个答案: