4

I would like to ask a series of question to users in one function using 

<input type="text" id="input">

In C, the scanf() function allows you to wait for user response and continue if the user enters a value. In JavaScript, how can I wait for user response in a function without using prompt() ?

R.J. Dunnill
  • 2,049
  • 3
  • 10
  • 21
Minjae Kwak
  • 185
  • 1
  • 2
  • 8

4 Answers4

0

prompt is unfortunately the closest equivalent, but you have asked for an alternative - browsers don't provide a mechanism to 'wait' in the way that c does so there's no direct equivalent.

The standard solution to this problem (a sequence of questions) in the browser would be a form, with multiple questions and answers and their own input fields.

You could unhide subsequent input fields as an effect of the previous field being validated.

To have, specifically, a single input that answers multiple questions, you will have to code your own solution.

Here's one way. I'm not sanitising the user input here - you'd want to do that if it were in production.

const input = document.getElementById('input');
const title = document.getElementById('title');
const resultsText = document.getElementById('resultsText');

const results = [];

let currentQuestion = "What is your name?";
const questions = [
  "What country do you live in?",
  "What is your primary language?"
]

const advanceForm = () => {
  results.push({
    q: currentQuestion,
    a: input.value
  })
  // Wipe input
  input.value = "";
  // Add next question
  title.innerHTML=questions[0];
  currentQuestion = questions[0];
  // If the questions array is not empty
  if (questions.length){
    // Save current input value to object
    questions.shift()
  } else {
    // If no question left, hide input and show info instead
    //Hide ID field
    input.style.visibility = "hidden";
    title.innerHTML = "Results:"
    // Represent the results as HTML
    const resultsAsHtml = results.map((result) => {
      return `<p>Question: ${result.q}</p><p>Answer: ${result.a}`
    })
    resultsText.innerHTML = resultsAsHtml
  }
}

input.addEventListener('keypress', (event) => {
    if (event.key === 'Enter') {
      advanceForm();
    }
});
<h3 id="title">What is your name?</h3>
<input type="text" id="input">
<p id="resultsText"><p>
Rhys Mills
  • 187
  • 7
-1

You can use onChange in js.

$(document).on('change','#input',function(e){
  e.preventDefault
});
Ritchee
  • 11
  • 1
  • 3
-1

you can use preventDefault() and stopPropagation()

$(document).on('change','#input',function(event){
  event.preventDefault()
  event.stopPropagation()
});
Tenusha Guruge
  • 2,147
  • 3
  • 18
  • 38
  • Never use `event.stopPropagation()` if you don't know what you're doing (or unless you're using it for debugging purpose). Events (yours or from 3rd party scripts) should always propagate. Also this does not answers the specific question by any means. – Roko C. Buljan Jun 17 '23 at 22:12
-2

There is default javascript function prompt();

reference

<!DOCTYPE html>
<html>
<body>

<p>Click the button to demonstrate the prompt box.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var person = prompt("Please enter your name", "Harry Potter");
    if (person != null) {
        alert( person );
    }
}
</script>

</body>
</html>
Pranav Bhatt
  • 715
  • 4
  • 8