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

kllo__

已于 2022-02-15 15:45:55 修改

阅读量817

点赞数

分类专栏： javascript 文章标签： javascript 前端 html

于 2022-02-15 15:42:55 首次发布

本文链接：https://blog.csdn.net/kllo__/article/details/122946082

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

问题描述

以下是起始HTML:

<html>
 <head>
 </head>
 <body>
		<div id="content"></div>
 </body>
</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<questions.length;i++)
{
  const button=document.createElement("button");
  const qElement=document.createElement("p");
  const answerElement=document.createElement("p");
  answerElement.textContent=questions[i].answer;
  qElement.textContent=`Question ${i+1}:`+questions[i].statement;
  button.textContent="Show answer";
  button.addEventListener("click",e=>{
     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 <i> tag
  const statementTextElement = document.createElement("i");
  statementTextElement.textContent = question.statement;

  // Question statement in a <div> 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++;
});

kllo__

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
编码挑战：JavaScript 向网页添加一个问题列表，可以通过点击按钮显示答案

问题描述以下是起始HTML:<html> <head> </head> <body> <div id="content"></div> </body></html>js代码：// Complete-This-Code// List of questions (statement + answer)const questions = [ { statement:.
复制链接

扫一扫