我正在尝试用 js 构建一个应用程序,该应用程序将从一个数组中获取一个随机问题,该数组将与另一个数组中的随机对象相结合。所以我的应用程序看起来像这样:
Array.prototype.random = function (length) {
return this[Math.floor(Math.random()*length)];
};
var country = [
{name:"Romania", capital: "Bucuresti"},
{name: "Bulgariei", capital: "Sofia"}
];
chosen_country = country.random(country.length);
var questions = [
"Which is the capital of ",
" is the capital of which country?"
];
var chosen_question = questions.random(questions.length);
function q() {
chosen_country;
chosen_question;
if(chosen_question == questions[0]) {
return chosen_question + chosen_country.name + "?";
} else if(chosen_question == questions[1]) {
return chosen_country.capital + chosen_question;
}
}
q();
因此,我的应用程序将从问题数组中生成一个随机问题,并将其与国家/地区数组中的随机对象相结合:
- “‘x 国’的首都是哪一个?”
- “‘首都 x’是哪个国家的首都?”
我想知道如何使用 HTML 中的按钮表单生成随机问题。后记我想在输入表单中回答问题,并将答案发送到另一个函数中使用,以检查答案是否正确。有人有什么想法吗?
我尝试使用 document.getElementById("que").innerHTML = q();
但我真的不知道如何正确使用它。有没有其他解决方案,或者我可以使用一些解释如何使用 .innerHTML
。
最佳答案
这是设置整个事情的不同方式。您可能会发现其中一些想法很有用。
- 没有库(纯 DOM 交互)
- 除了国家和首都之外还有更多的问题可能性
- 用于构建问题文本的简单字符串格式化程序
Array.prototype.random = function () {
return this[Math.floor(Math.random() * this.length)];
};
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g, "");
};
// -----------------------------------------------------------------------
function randomQuestion(bundle) {
var fact = bundle.facts.random(),
question = bundle.questions.random();
return {
text: question.text.replace(/\{([^}]+)\}/, function($0, $1) {
return fact[$1];
}),
answer: fact[question.compare]
};
}
// -----------------------------------------------------------------------
var countryBundle = {
facts: [
{country: "Romania", capital: "Bucuresti", continent: "Europe"},
{country: "Bulgaria", capital: "Sofia", continent: "Europe"},
{country: "Germany", capital: "Berlin", continent: "Europe"},
{country: "France", capital: "Paris", continent: "Europe"},
{country: "India", capital: "Delhi", continent: "Asia"}
],
questions: [
{text: "Which is the capital of {country}?", compare: 'capital'},
{text: "{capital} is the capital of which country?", compare: 'country'},
{text: "On what continent lies {country}?", compare: 'continent'}
]
};
// -----------------------------------------------------------------------
function setupForm() {
var questionLabel = document.getElementById("question"),
answerInput = document.getElementById("answer"),
currentQuestion,
showNextQuestion = function () {
currentQuestion = randomQuestion(countryBundle);
questionLabel.textContent = currentQuestion.text;
answerInput.value = "";
};
showNextQuestion();
document.getElementById("nextQuestion").onclick = showNextQuestion;
document.getElementById("enter").onclick = function () {
var correctAnswer = currentQuestion.answer.trim().toLowerCase(),
givenAnswer = answerInput.value.trim().toLowerCase();
if (correctAnswer === givenAnswer) {
alert("Yes :)");
showNextQuestion();
} else {
alert("No :(");
}
};
}
setupForm();
<button id="nextQuestion">Next question</button><br>
<label for="answer" id="question"> </label><br>
<input id="answer">
<button id="enter">OK</button>
关于javascript - 如何获取 HTML 表单中的 JS 函数结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28243874/