代码之家 › 专栏 › 技术社区 › Antonio Andrés

单击按钮后显示javascript测验

web html javascript

Antonio Andrés · 技术社区 · 8 年前

我想在单击按钮(onclick)后显示此测验。此时,它直接出现在网站上。我相信这很简单,但我被困在这里了。你知道我应该如何添加按钮代码吗?

这里是HTML:

  <div id="quiz"></div>

下面是JavaScript测验:

(function() {
function buildQuiz() {
  const output = [];

  myQuestions.forEach((currentQuestion, questionNumber) => {
    const answers = [];

    for (letter in currentQuestion.answers) {
      answers.push(
        `<label>
        <input type="radio" name="question${questionNumber}" value="${letter}">
        ${letter} :
        ${currentQuestion.answers[letter]}
      </label>`
      );
    }

    output.push(
      `<div class="question"> ${currentQuestion.question} </div>
    <div class="answers"> ${answers.join("")} </div>`
    );
  });

  quizContainer.innerHTML = output.join("");
}


const quizContainer = document.getElementById("quiz");
const myQuestions = [{
    question: "Who is the strongest?",
    answers: {
      a: "Superman",
      b: "The Terminator",
      c: "Waluigi, obviously"
    },
    correctAnswer: "c"
  },
  {
    question: "What is the best site ever created?",
    answers: {
      a: "SitePoint",
      b: "Simple Steps Code",
      c: "Trick question; they're both the best"
    },
    correctAnswer: "c"
  }
];

2 回复 | 直到 8 年前

Stephen Agwu 8 年前

你可以做几件事来完成你想要的事情。以下是我认为最好的方法。

将buildquick从无名函数调用中去掉,使其成为一阶函数。这将使其他函数能够调用它。
创建一个事件侦听器,其中包含加载DOM内容后运行的所有要使用的javascript。看起来是这样的:

document.addEventListener("DOMContentLoaded", function(event){ //code to be run after DOM is ready }

这将允许您的代码仅在DOM就绪时运行,并允许您组织代码的运行方式。

在前面提到的事件侦听器中,为要控制测验创建的按钮放置一个事件侦听器。在此回调中,将调用创建测验。

这里有一个 codepen 这说明了这将如何工作。此外,在您的实际应用中,如果用户的浏览器上没有启用javascript,那么包含noscript标记也很重要。干杯

Kumar Nitesh 8 年前

我为点击按钮添加了一个按钮,甚至还有一个监听器。我认为这很有帮助

(function() {
function buildQuiz() {
  
  document.getElementById("showQuiz").style.visibility = "hidden"
  const output = [];

  myQuestions.forEach((currentQuestion, questionNumber) => {
    const answers = [];

    for (letter in currentQuestion.answers) {
      answers.push(
        `<label>
        <input type="radio" name="question${questionNumber}" value="${letter}">
        ${letter} :
        ${currentQuestion.answers[letter]}
      </label>`
      );
    }

    output.push(
      `<div class="question"> ${currentQuestion.question} </div>
    <div class="answers"> ${answers.join("")} </div>`
    );
  });

  quizContainer.innerHTML = output.join("");
}


var quizContainer = document.getElementById("quiz");
var myQuestions = [{
    question: "Who is the strongest?",
    answers: {
      a: "Superman",
      b: "The Terminator",
      c: "Waluigi, obviously"
    },
    correctAnswer: "c"
  },
  {
    question: "What is the best site ever created?",
    answers: {
      a: "SitePoint",
      b: "Simple Steps Code",
      c: "Trick question; they're both the best"
    },
    correctAnswer: "c"
  }
];
  document.getElementById('showQuiz').addEventListener('click',buildQuiz);
}());

<button id="showQuiz">Show Quiz</button>
<div id="quiz"></div>