如何将 JS 函数结果转换为 HTML 形式？

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

所以我的应用将从问题数组中生成一个随机问题，并将其与国家数组中的随机对象组合：

"Which is the capital of 'country x' ?"
'Capital x'是哪个国家的首都？

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

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

Answer 1

我稍微修改了你的代码。我使用的是 querySelector，它比 getElementById 更强大，但是在引用具有 ID 的元素时需要使用井号 (#)。

我还将您的点击处理程序从 HTML 移到了 JavaScript，这是最佳做法。

每次点击按钮，que会随机显示一个问题：

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>

Answer 2

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

无库（纯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([=10=], ) {
            return fact[];
        }),
        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>

如何将 JS 函数结果转换为 HTML 形式？

How do I get a JS function resut to a HTML form?

html

javascript

arrays

random

dom