差异列表

Question

我是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;
}

Answer 1

我认为最好将所有关键字堆积成纯文本形式的数组，而不是您当前正在做的事情，然后再在其中添加样式和所需的html标签。这样一来，您无需像现在一样+=进入keyWords +=。

我建议这样做，因为您的某些标记和样式逻辑假定为（IMO）。一旦构造了此数组，就可以使用.map()添加标签和样式，然后使用.join()获得所需的内容。

让我知道是否合理。很高兴回答其他问题...

Answer 2

差异列表

从不给<aside>一个id='keywords'
keyWords声明为<dfns>的数量（假设有7个）
keyWords += keyWordElems（例如7 + <dfn>）???
var linkID = replaceWS(7); （例如7）
<dfn> = 7 +“ _” + 7; ???
必须使用某些条件才能使用.shadowRoot()，但是即使满足这些条件，.shadowRoot()在这一点上也没有用。（例如.shadowRoot(Not a Function)）
(function(a, b) { return a-b})应该是arrayOfkeyWords.sort()
keyWordLink.innerHTML = keyWords[i]; ??? （例如<a><dfn></dfn></a>）
linkID = replace(keyWords);（例如7 =不是函数）-这是replace()方法的签名：string.replace(regex, replacement)。
keyWordLink.setAttribute("id", keyWords[i] + linkID);？ -（例如<a id="<dfn></dfn>7">）
keywords.firstChild("article#doc"); -什么都不做
您永远不要分配这样的样式，而只能在外部样式表中创建类（例如<link href='https://example.com/path/to/style.css' rel='stylesheet'>） \\不需要换行，并且这些样式将以静默方式失败，因为#keywords不存在，并且\\中的语法无效 "aside#keywords { \ border: 3px solid rgb(101, 101, 101); \ float: right; \ margin: 20px 0px 20px 20px; \ padding: 10px; \ width: 320px; \ }", 0);

演示

var rules = `
aside#keywords {border: 3px solid rgb(101, 101, 101); float: right; margin: 20px 0px 20px 20px; padding: 10px; width: 320px;} 
aside#keywords h1 {font-size: 2em; margin: 5px; text-align: center; }
aside#keywords ol {font-size: 1.2em;}
aside#keywords ol li {line-height: 1.5em;}
aside#keywords ol li a {color: rgb(101, 101, 101); text-decoration: none;}`;

function injectStyles(rules) {
  var head = document.querySelector('head');
  var kS = document.getElementById('keyStyles');
  if (!kS) {
    head.insertAdjacentHTML('beforeend', `<style id="keyStyles">${rules}</style>`);
  } else {
    kS.insertAdjacentText('beforeend', rules);
  }
}

function keyWordList(e) {
  var docFrag = document.createDocumentFragment();
  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);
  docFrag.appendChild(keywords);
  keywords.id = 'keywords';

  var keyWordDFN = document.querySelectorAll("dfn");
  var keyWordQty = keyWordDFN.length;
  var keyWords = [];

  for (let i = 0; i < keyWordQty; i++) {
   keyWords.push(keyWordDFN[i].textContent.toLowerCase());
  }
  keyWords = keyWords.sort();

  for (let t = 0; t < keyWordQty; t++) {
    var keyWordListItem = document.createElement("li");
    var keyWordLink = document.createElement("a");
    keyWordLink.textContent = keyWords[t];
    keyWordLink.href = "#/";
    keyWordListItem.appendChild(keyWordLink);
    orderList.appendChild(keyWordListItem);
  }
  document.getElementById('DOC').prepend(docFrag);
  return injectStyles(rules);
}
document.addEventListener("DOMContentLoaded", keyWordList);

main {
  width: 100%
}

<main id='DOC'>
  <p><dfn>Lorem</dfn> ipsum dolor sit amet, <dfn>consectetur</dfn> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore <dfn>magna</dfn> aliqua. Ut enim ad minim veniam, quis nostrud exercitation <dfn>ullamco</dfn> laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in <dfn>reprehenderit</dfn> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint <dfn>occaecat</dfn> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>

JavaScript中的关键字列表

2 个答案:

差异列表

演示