如何将JS函数转换为HTML表单？

Question

I'm trying to build an app in js that would get a random question from an array that would combine with a random object from another array. So my app looks like this:

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();

So my app will generate a random question from the questions array and combine it with a random object from the country array:

1. "Which is the capital of 'country x' ?"
2. "'Capital x' is the capital of which country?"

I would like to know how get the random question generated with a button form in HTML. Afterwords I would like to answer the question within an input form and send the answer to be use in another function to check if the answer is corector not. Anyone having any idea?

I have tried to use document.getElementById("que").innerHTML = q(); but I realy don't know how to use it properly. Is there any other solution or I could use some explanations how to use .innerHTML .

Answer 1

Here is a different way of setting up the whole thing. You might find some of the ideas useful.

• no library (pure DOM interaction)
• more question possibilities than just country and capital
• a simple string formatter for building the question text

 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> 

Answer 2

I've changed your code a bit. I'm using querySelector , which is more powerful than getElementById , but you'll need to use a pound sign (#) when referring to elements with Ids.

I've also moved your click handler from the HTML into the JavaScript, which is best practice.

Each time you click the button, que will show a random question:

 Array.prototype.random = function (length) { return this[Math.floor(Math.random()*length)]; }; var country = [ {name:"romaniei", capital: "bucuresti"}, {name: "bulgariei", capital: "sofia"} ], questions = [ "What is the capital of ", " is the capital of what country?" ] document.querySelector('input').onclick= function() { var q, chosen_country = country.random(country.length), chosen_question = questions.random(questions.length); if(chosen_question == questions[0]){ q= chosen_question + chosen_country.name + "?"; } else if(chosen_question == questions[1]){ q= chosen_country.capital + chosen_question; } document.querySelector('#que').innerHTML= q; } 

 <form name="myform"> <input type="button" value="Generate question"> <div id="que">Intrebare:</div> </form>