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() ?
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() ?
Share Improve this question edited Jun 27, 2019 at 3:07 R.J. Dunnill 2,0893 gold badges11 silver badges23 bronze badges asked May 4, 2016 at 4:41 Minjae KwakMinjae Kwak 1851 gold badge3 silver badges8 bronze badges 2- Does it have to be a pop up?See if this helps stackoverflow./questions/17437147/… – Satej S Commented May 4, 2016 at 4:46
- scanf also parses the input based on the format string. – James M. Lay Commented Nov 15, 2021 at 19:16
4 Answers
Reset to default 1prompt 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>You can use onChange in js.
$(document).on('change','#input',function(e){
e.preventDefault
});
you can use preventDefault() and stopPropagation()
$(document).on('change','#input',function(event){
event.preventDefault()
event.stopPropagation()
});
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>