编码挑战：JavaScript 向网页添加一个问题列表，可以通过点击按钮显示答案

问题描述

以下是起始HTML:

 js代码：

// Complete-This-Code

// List of questions (statement + answer)
const questions = [
  {
    statement: "2+2?",
    answer: "2+2 = 4"
  },
  {
    statement: "In which year did Christopher Columbus discover America?",
    answer: "1492"
  },
  {
    statement:
      "What occurs twice in a lifetime, but once in every year, twice in a week but never in a day?",
    answer: "The E letter"
  }
];

// Write - Your - Code - From - Here

        补充完成JavaScript 代码以在 div 中显示问题，每个问题旁边都有一个按钮，上面写着“Show the answer”，点击此按钮会替换为该问题的答案。

最终界面如下：

 解决方法

我的：

// Complete-This-Code

// List of questions (statement + answer)
const questions = [
  {
    statement: "2+2?",
    answer: "2+2 = 4"
  },
  {
    statement: "In which year did Christopher Columbus discover America?",
    answer: "1492"
  },
  {
    statement:
      "What occurs twice in a lifetime, but once in every year, twice in a week but never in a day?",
    answer: "The E letter"
  }
];

// Write - Your - Code - From - Here
const docElement=document.getElementById("content");
for(let i =0;i{
     docElement.replaceChild(answerElement,button);
  });
  docElement.appendChild(qElement);
  docElement.appendChild(button);
}

显示效果：

 

 参考答案：

// Complete-This-Code

// List of questions (statement + answer)
const questions = [
  {
    statement: "2+2?",
    answer: "2+2 = 4"
  },
  {
    statement: "In which year did Christopher Columbus discover America?",
    answer: "1492"
  },
  {
    statement:
      "What occurs twice in a lifetime, but once in every year, twice in a week but never in a day?",
    answer: "The E letter"
  }
];

let i = 1; // Question index

questions.forEach(question => {
  // Question title
  const titleElement = document.createElement("strong");
  titleElement.textContent = `Question ${i}: `;

  // Question statement text in a  tag
  const statementTextElement = document.createElement("i");
  statementTextElement.textContent = question.statement;

  // Question statement in a 
 tag
  const statementElement = document.createElement("div");
  statementElement.appendChild(titleElement);
  statementElement.appendChild(statementTextElement);

  // Answer zone, with a button initially
  const answerZoneElement = document.createElement("div");
  const buttonElement = document.createElement("button");
  buttonElement.textContent = "Show answer";
  answerZoneElement.appendChild(buttonElement);

  buttonElement.addEventListener("click", () => {
    // Replace button by answer
    const answerElement = document.createElement("div");
    answerElement.textContent = question.answer;
    answerZoneElement.innerHTML = "";
    answerZoneElement.appendChild(answerElement);
  });

  // Question is statement + answer
  const questionElement = document.createElement("p");
  questionElement.appendChild(statementElement);
  questionElement.appendChild(answerZoneElement);
  document.getElementById("content").appendChild(questionElement);

  i++;
});