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>
<!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>
5条答案
按热度按时间ukxgm1gy1#
您可以在js中使用onChange。
zpqajqem2#
可以使用
preventDefault()
和stopPropagation()
ycl3bljg3#
biswetbf4#
不幸的是
prompt
是最接近的等价物,但是你已经要求了一个替代方案-浏览器不提供c
那样的"等待"机制,所以没有直接的等价物。在浏览器中,这个问题(一系列问题)的标准解决方案是一个表单,其中包含多个问题和答案以及它们自己的
input
字段。您可以取消隐藏后续的
input
字段,作为验证前一个字段的效果。具体来说,要使单个输入回答多个问题,您必须编写自己的解决方案。
这里有一种方法,我不会在这里对用户输入进行消毒--如果它在生产环境中,您会希望这样做。
9ceoxa925#
有默认的javascript函数
prompt();
参考文献