Question

我想在点击按钮（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"
  }
];

Answer 1

您可以采取一些措施来获得您想要的成就。这是我认为最好的方式。

将buildQuiz从无名函数调用中取出，使其成为一阶函数。这将使其他功能能够调用它。
创建一个事件侦听器，其中包含您要在加载DOM内容后运行的所有javascript。看起来像这样：

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

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

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

继承人codepen，说明了这将如何运作。同样在你真实的事情中，包括一个noscript标签是很重要的，因为这个人没有在他们的浏览器上启用javascript。干杯！

Answer 2

我添加了一个按钮甚至是单击按钮的监听器。我认为这有帮助

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

单击按钮后显示javascript测验

2 个答案: