// TO BE DONE: Code populateResultBox() callback function.

并将其替换为以下代码：

const populateResultBox = () => {

  resultBox.classList.remove(‘default-result’);
  resultBox.removeChild(‘placeHolder’);
  resultBox.classList.add(‘custom-scrollbar’);

  createParagraphText();

  // Create paragraphs and set textContent only
  // if not already created. Prevents doubling
  // of result data if old paragraphs have not
  // yet been garbage collected.

  if (paragraphs.length === 0) {
    createParagraphs();
  }
  // Append all result paragraphs to resultBox.

  appendParagraphs(resultBox, paragraphs);

};

代码列表1. Populateresultbox（）回调函数

在此功能中正在发生很多事情，尽管其中大部分在我们对辅助功能的讨论中都被分解了。尽管如此，这里仍然还有一些新概念。

前三行代码是对DOM的操纵，正如我们在本教程中以前从未见过的那样。要充分理解这三行，我们将需要查看来自HTML和CSS的一些代码段。

代码列表2 下面显示了 resultbox 引用的HTML元素：

代码清单2. resultbox捕获的html元素

您可能会从第2部分中回忆起以元素
<div id= “getResults”>开头的代码列表，其中包含带有两个按钮的整个小部件和<p>元素， no匹配消息显示在<< BR>上面清单1。

我们需要简要介绍 css 代码，以充分了解populateResultBox()正在更改的内容。

查看代码列表3 下面：

代码列表3. CSS类控制Resultbox背景颜色

您可以看到，.default-result类指定灰色背景。由于此背景是要填充resultBox的结果的占位符的一部分，因此我们想清除它。

现在，让我们查看populateResultBox()回调函数中的第一行代码：

resultBox.classList.remove(‘default-result’);

我们知道，resultBox对象捕获代码清单中显示的<div id=“results”> 2 。

在文档对象模型（dom）中，HTML元素具有classList属性，它可以跟踪与它们相关的所有CSS类。

链接到classList属性的remove()方法确实做到了它所说的内容，它将从classlist中删除了该类。这确实是不是意味着该类是从链接的CSS文件中删除的。 的意思是，浏览器中显示的网页将不再在结果的滚动窗口中显示灰色背景。

resultBox.removeChild(placeHolder);

resultBox.classList.add(‘custom-scrollbar’);

.custom-scrollbar {
  --scrollbar-foreground: #a239ca;
  --scrollbar-background: rgba(162, 57, 202, 0.25);
  /* Foreground and Background Colors */
  scrollbar-color: var(--scrollbar-foreground)
  var(--scrollbar-background);
}

没有深入研究上述代码，我们只需要知道的是，该类将在resultBox中的滚动条设置前景和背景样式。对于那些有兴趣深入研究样式的人，上述样式是由CSS Tricks 的作品（Coyier，'）所启发的，它使用自定义属性来造型CSS << /em>）。

const depopulateResultBox = () => {
  while (resultBox.firstChild) {
   resultBox.removeChild(resultBox.firstChild); 
  }
  resultBox.classList.remove(‘custom-scrollbar’);
  resultBox.classList.add(‘default-result’);
  resultBox.appendChild(placeholder);
};

const resultButton = document.getElementById(‘validate’);
const resetButton = document.getElementById(‘reset’);

resultButton.addEventListener(‘click’, populateResultBox);

resetButton.addEventListener(‘click’, depopulateResultBox);