我正在尝试设计一个页面,向用户询问几个问题,用户在文本框中键入答案。
我使用Switch语句为不同的答案生成不同的评论。
可以用许多不同的方式输入相同的答案。例如,用户可以键入“是”或“您下注”,而不是键入“是”。
有没有办法将所有可能的答案视为一件事,以避免出现类似这样的事情:
switch (answers) {
case "Yes":
case "Yep":
case "Yeah":
case "You bet":
case "Sure":
case "Absolutely":
text = "Me too.";
break;
case "No":
case "Nope":
case "Nah":
case "I hate it":
case "I do not":
case "Not at all":
text = "Why not?";
break;
default:
text = "What?"
我想有一个单独的文件,其中包含页面中所有预期答案的所有可能的同义词。
这样,我可以有这样的东西,它会显示“是的情况”的评论,而不是“默认”的评论,即使用户输入“你打赌”,“是”,或任何其他代名词:
switch (answers) {
case "Yes":
text = "Me too.";
break;
case "No":
text = "Why not?";
break;
default:
text = "What?"
这就是我正在使用的:
function myFunction() {
var text;
var answers = document.getElementById("myInput").value;
switch (answers) {
case "Yes":
case "Yep":
case "Yeah":
case "You bet":
case "Sure":
case "Absolutely":
text = "Me too.";
break;
case "No":
case "Nope":
case "Nah":
case "I hate it":
case "I do not":
case "Not at all":
text = "Why not?";
break;
default:
text = "What?"
}
document.getElementById("comment").innerHTML = text;
}
<p>Do you like waffles?</p>
<input id="myInput" type="text">
<button onclick="myFunction()">Answer</button>
<p id="comment"></p>
这是一种可能的方法:
{
const questions = [
{
text: 'Do you like waffles?',
inputs: {
yes: ['yes', 'yep', 'yeah'],
no: ['no', 'nope', 'nah']
},
replies: {
yes: 'Me too.',
no: 'Why not?',
other: 'What?'
}
},
{
text: 'Do you like pasta?',
inputs: {
yes: ['yes', 'yep', 'yeah'],
no: ['no', 'nope', 'nah']
},
replies: {
yes: 'Me too!',
no: 'Why not?!',
other: 'What?!'
}
},
];
let currentQuestionIndex = -1;
function goToNextQuestion() {
let currentQuestion = questions[++currentQuestionIndex];
document.getElementById('myQuestion').innerHTML = currentQuestion.text;
document.getElementById('myInput').value = '';
document.getElementById('myInput').focus();
}
function answer() {
let currentQuestion = questions[currentQuestionIndex];
const input = document.getElementById('myInput').value;
const replyKey = Object.keys(currentQuestion.inputs)
.find(inputKey => currentQuestion.inputs[inputKey].includes(input))
|| 'other';
document.getElementById('answer').innerHTML = currentQuestion.replies[replyKey];
if (currentQuestionIndex < questions.length - 1) {
goToNextQuestion();
}
}
goToNextQuestion();
}
<p id="myQuestion"></p>
<input id="myInput" type="text">
<button onclick="answer()">Answer</button>
<p id="answer"></p>
注意:附加的包装括号用于防止使用常量污染全局范围。虽然需要ES6 - 如果你对全局变量没问题,你可以摆脱它们。
一个选项可能是有2个数组或集合,一个包含所有Yes响应,另一个包含所有No响应,并在进入switch语句之前检查输入是否匹配数组/集合中的任何值。
你可以使用一个对象和一个函数,用它们的规范化(小写)字符串迭代答案和短语。
function x(answer) {
var check = {
answers: [
{
phrases: ["yep", "yeah", "you bet", "sure", "absolutely"],
text: "Me too."
},
{
phrases: ["no", "nope", "nah", "i hate it", "i do not", "not at all"],
text: "Why not?"
}
],
text: "What?"
};
answer = answer.toLowerCase();
return (check.answers.find(o => o.phrases.includes(answer.toLowerCase())) || check).text;
}
console.log(x('No'));
console.log(x('Sure'));
console.log(x('Whatever!'));