javascript - 如何获取 HTML 表单中的 JS 函数结果？

Question

我正在尝试用 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();

因此，我的应用程序将从问题数组中生成一个随机问题，并将其与国家/地区数组中的随机对象相结合:

1. “‘x 国’的首都是哪一个？”
2. “‘首都 x’是哪个国家的首都？”

我想知道如何使用 HTML 中的按钮表单生成随机问题。后记我想在输入表单中回答问题，并将答案发送到另一个函数中使用，以检查答案是否正确。有人有什么想法吗？

我尝试使用 document.getElementById("que").innerHTML = q(); 但我真的不知道如何正确使用它。有没有其他解决方案，或者我可以使用一些解释如何使用 .innerHTML。

Answer 1

这是设置整个事情的不同方式。您可能会发现其中一些想法很有用。

• 没有库(纯 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">&nbsp;</label><br>
<input id="answer">
<button id="enter">OK</button>