如何使 JS 函数重新转换为 HTML 表单

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

本文关键字：转换 HTML 表单 JS 何使 函数 新转换      更新时间：2023-09-26

我正在尝试用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. "'首都
  2. x'是哪个国家的首都？"

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

我尝试使用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("answerswer"),            
        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="answerswer" id="question">&nbsp;</label><br>
<input id="answerswer">
<button id="enter">OK</button>

我已经稍微改变了你的代码。 我使用的是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>

相关文章：