JavaScript中的关键字列表

我是JavaScript的初学者。这是我的大学作业。我做到了，但我不明白为什么代码不起作用。最后一个项目应该有一个边栏作为关键字列表。第一个截图是我得到的，第二个截图是我应该得到的。我已经在HTML和CSS文件中添加了相关的id。提前谢谢你的帮助

这是我的JS代码

"use strict";
window.addEventListener("load", findKeyWords);
window.addEventListener("load", makeKeyStyles);
//Locate the keywords in the article indicated by the <dfn> tag
//and add those keywords in alphabetical order to a keyword box.
function findKeyWords() {
  var keywords = document.createElement("aside");
  var mainHeading = document.createElement("h1");
  var headingText = document.createTextNode("Keywords List");
  var orderList = document.createElement("ol");
  mainHeading.appendChild(headingText);
  keywords.appendChild(mainHeading);
  keywords.appendChild(orderList);
  var keyWordElems = document.getElementById("doc").querySelectorAll("dfn");
  var keyWords = keyWordElems.length;
  for (var i = 0; keyWordElems.length; i++) {
    keyWords += keyWordElems[i];
    var linkID = replaceWS(keyWords);
    keyWordElems[i] = keyWords + "_" + linkID;
  }
  keyWords.shadowRoot(function(a, b) {
    return a - b
  });
  for (var i = 0; i < keyWords.length; i++) {
    var keyWordListItem = document.createElement("li");
    var keyWordLink = document.createElement("a");
    keyWordLink.innerHTML = keyWords[i];
    linkID = replace(keyWords);
    keyWordLink.setAttribute("id", keyWords[i] + linkID);
    keyWordListItem.appendChild(KeyWordLink);
    orderList.appendChild(keyWordListItem);
  }
  keywords.firstChild("article#doc");
}
//Create an embedded style sheet for the keyword box.
function makeKeyStyles() {
  var embeddedStyles = document.createElement("style");
  document.head.appendChild(embeddedStyles);
  document.styleSheets[document.styleSheets.length - 1].insertRule("aside#keywords { \
 border: 3px solid rgb(101, 101, 101); \
 float: right; \
 margin: 20px 0px 20px 20px; \
 padding: 10px; \
 width: 320px; \
 }", 0);

  document.styleSheets[document.styleSheets.length - 1].insertRule("aside#keywords h1 { \
font-size: 2em; \
margin: 5px; \
text-align: center; \
}", 1);

  document.styleSheets[document.styleSheets.length - 1].insertRule("aside#keywords ol { \
font-size: 20px; \
font-size: 1.2em; \
}", 2);

  document.styleSheets[document.styleSheets.length - 1].insertRule("aside#keywords ol li { \
line-height: 1.5em; \
}", 3);

  document.styleSheets[document.styleSheets.length - 1].insertRule("aside#keywords ol li a { \
color: rgb(101, 101, 101); \
text-decoration: none; \
}", 4);
}
/* Supplied Functions */
function replaceWS(textStr) {
  var revText = textStr.replace(/\s+/g, "_");
  return revText;
}

“严格使用”；
window.addEventListener（“加载”，findKeyWords）；
addEventListener（“加载”，makeKeyStyles）；
//找到标签所指示的文章中的关键字
//然后按字母顺序将这些关键字添加到关键字框中。
函数findKeyWords（）{
var关键字=document.createElement（“aside”）；
var maintheading=document.createElement（“h1”）；
var headingText=document.createTextNode（“关键字列表”）；
var orderList=document.createElement（“ol”）；
mainHeading.appendChild（headingText）；
关键词：儿童（主标题）；
关键词.appendChild（订单列表）；
var关键字elems=document.getElementById（“doc”）.queryselectoral（“dfn”）；
var关键字=关键字elems.length；
for（变量i=0；关键字elems.length；i++）{
关键词+=关键词元素[i]；
var linkID=replaceWS（关键字）；
关键词元素[i]=关键词+“”+linkID；
}
关键词.shadowRoot（函数（a，b）{
返回a-b
});
对于（var i=0；i

---

我认为最好是将所有关键字以纯文本形式累积到一个数组中，而不是像现在这样，然后在其周围添加样式+所需的html标记。这样你就不必像现在这样把

+=

转换成

关键字+=

我之所以建议这样做，是因为您的一些逻辑需要标记和样式（IMO）。一旦构建了这个数组，就可以使用

.map（）

添加标记+样式，然后使用

.join（）

来获得所需的内容

让我知道这是否有意义。很高兴回答更多问题…

差异列表

从未给过

一个

id='keywords'

关键字

声明为

的数量（假设有7个）

关键字+=keyWordElems

（例如7+

）

var linkID=replaceWS（7）

；（例7）

=7+“”+7

要使用

.shadowRoot（）

，必须满足某些条件，但即使满足这些条件，

.shadowRoot（）

此时也将无效。（例如

.shadowRoot（不是函数）

）

（函数（a，b）{return a-b}）

应该是

arrayOfkeyWords.sort（）

keyWordLink.innerHTML=关键字[i]

？？？（例如

）

linkID=replace（关键字）

（例如7=不是函数）--这是

replace（）

方法的签名：

string.replace（regex，replacement）

keyWordLink.setAttribute（“id”，关键字[i]+linkID）？？？--（例如
）

关键字.firstChild（“article#doc”）

--无所事事

您不应该像这样分配样式，只需在外部样式表中创建类（例如

）

\

换行符是不必要的，这些样式会自动失败，因为

\

中不存在关键字，并且

\

中的语法无效

“除了#关键字{”
边框：3倍实心rgb（101、101、101）\
浮动：对\
保证金：20px 0px 20px 20px\
填充：10px\
宽度：320px\
}", 0);

---

演示

var规则=`
旁白#关键字{边框：3px实心rgb（101、101、101）；浮点：右；边距：20px 0px 20px 20px；填充：10px；宽度：320px；}
旁白#关键词h1{字体大小：2em；边距：5px；文本对齐：中间；}
旁白#关键词ol{字体大小：1.2em；}
旁白#关键词ol li{线高：1.5em；}
旁白#关键词OLLIA{颜色：rgb（101，101，101）；文本装饰：无；}`；
函数类型（规则）{
var head=document.querySelector（'head'）；
var kS=document.getElementById（'keyStyles'）；
如果（！kS）{
head.insertAdjacentHTML（'beforeend'，'${rules}'）；
}否则{
kS.insertAdjacentText（'beforeend'，规则）；
}
}
函数关键字列表（e）{
var docFrag=document.createDocumentFragment（）；
var关键字=document.createElement（“aside”）；
var maintheading=document.createElement（“h1”）；
var headingText=document.createTextNode（“关键字列表”）；
var orderList=document.createElement（“ol”）；
main.appen