如何在JavaScript中从对象选取键值并设置元素innerHTML

首先你需要在HTML里准备好三个用于展示内容的元素，给它们设置ID方便后续获取：

<!-- 展示问题文本 -->
<div id="questionElement"></div>
<!-- 展示选项 -->
<div id="optionsElement"></div>
<!-- 展示答案 -->
<div id="answerElement"></div>

接下来在JavaScript里按以下步骤实现需求：

• 先获取这三个DOM元素
• 从你的questions数组中取出目标对象（这里数组只有一个元素，直接取索引0的对象即可）
• 分别给三个元素的innerHTML赋值，注意options是数组，需要转成适合展示的字符串格式

完整代码示例： #

const questions = [
  {
    questionText: "Commonly used data types DO NOT include:",
    options: ["1. strings", "2. booleans", "3. alerts", "4. numbers"],
    answer: "3. alerts"
  }
];

// 获取页面上的三个目标元素
const questionEl = document.getElementById('questionElement');
const optionsEl = document.getElementById('optionsElement');
const answerEl = document.getElementById('answerElement');

// 取出数组中的第一个问题对象
const currentQuestion = questions[0];

// 设置问题文本
questionEl.innerHTML = currentQuestion.questionText;

// 处理选项：两种排版方式选其一即可
// 方式1：用<br>实现换行展示
optionsEl.innerHTML = currentQuestion.options.join('<br>');

// 方式2：生成无序列表，排版更规范
// optionsEl.innerHTML = `<ul>${currentQuestion.options.map(opt => `<li>${opt}</li>`).join('')}</ul>`;

// 设置答案
answerEl.innerHTML = `正确答案：${currentQuestion.answer}`;

补充说明： #

• 如果你的questions数组包含多个对象，只需通过循环遍历数组，重复上述赋值逻辑就能批量展示所有问题
• 确保JS代码在DOM元素加载完成后执行：可以把代码放在<body>标签末尾，或者用DOMContentLoaded事件包裹代码

内容的提问来源于stack exchange，提问作者mDR