when user hits enter, new input appears

user_12215907 0
Viewed 194

I am working on a 'mad libs' type of program in HTML- basically the user is asked a series of questions and upon hitting submit, the script prints a story with their answers.

How do I make it so that, when the user writes their answer, they can hit enter and the new question will appear? I want the questions to be revealed one by one- only after the user has answered the previous question. So it is kind of similar to an animation. Is there a way to do this? 

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>

html javascript
2 Answers

this works if this is what you are looking for: (sorry it's long and I couldn't help myself to do it for you, sorry. :))

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>

user_111630540

There's quite a bit involved with doing this.

  1. You need to hide all questions but the first (via CSS), then reveal them as they are answered.
  2. We need to find out where our next element is so we can display it.
  3. An event listener needs to be created so when enter is pressed the correct action is performed.
  4. When the form is reset, we need to hide the questions again and clear the result via the onreset() method.

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>

user_38242830
Related