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

标签 javascript html arrays dom random

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

最佳答案

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

  • 没有库(纯 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>

关于javascript - 如何获取 HTML 表单中的 JS 函数结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28243874/

相关文章:

javascript - React setstate 采用以前的值

javascript - ng-model 没有因 select 中的选择更改而更新

c - 将 64 个 bool 数组打包/解包到一个 uint64 中

java - 在排序数组中间添加值的最快方法 - Java

javascript - 模块返回空数组

javascript - Angular 和 Jasmine : how to mock a service that returns a promise

php - 将 html/php 代码存储到 php 变量中

html - HTML 中的文本区域显示代码而不是呈现和格式化

javascript - 全局 iframe 文档

php - 非法数组键