JS一个简单问题，大神进，轻松拿分！

悬赏园豆：20 [已解决问题] 解决于 2017-10-26 23:45

如下几个代码，为什么displayAbbreviations.js的代码没起作用，为什么没显示这个：

结果只显示了这个displayCitations.js的功能，如图：

代码清单如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Explaining the Document Object Model</title>
    <link rel="stylesheet" type="text/css" media="screen" href="styles/typography.css" />
    <script type="text/javascript" src="scripts/addLoadEvent.js"></script>
    <script type="text/javascript" src="scripts/displayAbbreviations.js"></script>
    <script type="text/javascript" src="scripts/displayCitations.js"></script>
</head>

<body>
    <h1>What is the Document Object Model?</h1>
    <p>
        The <abbr title="World Wide Web Consortium">W3C</abbr> defines the <abbr title="Document Object Model">DOM</abbr> as:
    </p>
    <blockquote cite="http://www.w3.org/DOM/">
        <p>

function displayCitations() {
  if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// get all the blockquotes
  var quotes = document.getElementsByTagName("blockquote");
// loop through all the blockquotes
  for (var i=0; i<quotes.length; i++) {
// if there is no cite attribute, continue the loop
    if (!quotes[i].hasAttribute("cite")) continue;
// store the cite attribute
    var url = quotes[i].getAttribute("cite");
// get all the element nodes in the blockquote
    var quoteChildren = quotes[i].getElementsByTagName('*');
// if there are no element node, continue the loop
    if (quoteChildren.length < 1) continue;
// get the last element node in the blockquote
    var elem = quoteChildren[quoteChildren.length - 1];
// create the markup
    var link = document.createElement("a");
    var link_text = document.createTextNode("source");
    link.appendChild(link_text);
    link.setAttribute("href",url);
    var superscript = document.createElement("sup");
    superscript.appendChild(link);
// add the markup to the last element node in the blockquote
    elem.appendChild(superscript);
  }
}
addLoadEvent(displayCitations);

 A platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. </p> </blockquote> <p> It is an <abbr title="Application Programming Interface">API</abbr> that can be used to navigate <abbr title="HyperText Markup Language"> HTML</abbr> and <abbr title="eXtensible Markup Language">XML </abbr> documents. </p> </body> </html>

function displayAbbreviations() {
  if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
// get all the abbreviations
  var abbreviations = document.getElementsByTagName("abbr");
  if (abbreviations.length < 1) return false;
  var defs = new Array();
// loop through the abbreviations
  for (var i=0; i<abbreviations.length; i++) {
    var current_abbr = abbreviations[i];
    if (!current_abbr.childNodes.length < 1) continue;
    var definition = current_abbr.getAttribute("title");
    var key = current_abbr.lastChild.nodeValue;
    defs[key] = definition;
  }
// create the definition list
  var dlist = document.createElement("dl");
// loop through the definitions
  for (key in defs) {
    var definition = defs[key];
// create the definition title
    var dtitle = document.createElement("dt");
    var dtitle_text = document.createTextNode(key);
    dtitle.appendChild(dtitle_text);
// create the definition description
    var ddesc = document.createElement("dd");
    var ddesc_text = document.createTextNode(definition);
    ddesc.appendChild(ddesc_text);
// add them to the definition list
    dlist.appendChild(dtitle);
    dlist.appendChild(ddesc);
  }
  if (dlist.childNodes.length < 1) return false;
// create a headline
  var header = document.createElement("h2");
  var header_text = document.createTextNode("Abbreviations");
  header.appendChild(header_text);
// add the headline to the body
  document.body.appendChild(header);
// add the definition list to the body
  document.body.appendChild(dlist);
}
addLoadEvent(displayAbbreviations);

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

JavaScript DOM js Node.js 前端

Lawliet__zmz | 初学一级 | 园豆：4
提问于：2017-10-12 14:02

< >

最佳答案

我去真特么乱。。

function displayAbbreviations() {
  if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;

这里不是有个判断会拦截么。

当这个游览器自带getElementsByTagName 或者 createElement 或者 createTextNode的时候就会进入false 不会继续执行下去。。。

话说你不会是问这个吧。。没理由这么简单。。如果我看错了问题请不要责怪我

收获园豆：20

blurs | 小虾三级 |园豆：660 | 2017-10-12 17:50

但是我单单用这个js文件是可以显示的啊

Lawliet__zmz | 园豆：4 (初学一级) | 2017-10-12 18:02

有qq吗，我把代码发给您，解决了，给您采纳

Lawliet__zmz | 园豆：4 (初学一级) | 2017-10-12 18:04

有qq吗，我把代码发给您，解决了，给您采纳

Lawliet__zmz | 园豆：4 (初学一级) | 2017-10-12 18:04

@Lawliet__zmz: 好吧你对闭包熟悉么你貌似犯了个很不容易发觉的bug，我刚刚也是仔细看了一下流程才发现的。

blurs | 园豆：660 (小虾三级) | 2017-10-12 18:21

@blurs: 了解一些，不是非常熟悉，话说这是DOM艺术红书上的源代码

Lawliet__zmz | 园豆：4 (初学一级) | 2017-10-12 18:22

@Lawliet__zmz: 那就说明是我错了，刚刚测试一下可以执行说明是我学艺不精！~~ QAQ 话说你打断点查过了吗？有发布外网吗？

blurs | 园豆：660 (小虾三级) | 2017-10-12 18:23

@blurs: 不会JS的调试啊，没发布，可以加您qq吗，qq上给你代码，解决了给您采纳啊，一起交♂流啊

Lawliet__zmz | 园豆：4 (初学一级) | 2017-10-12 18:25

@Lawliet__zmz: 话说你用的什么游览器？ IE?

blurs | 园豆：660 (小虾三级) | 2017-10-12 18:31

@Lawliet__zmz: 我刚刚试着把代码还原了一下在谷歌上运行良好。

blurs | 园豆：660 (小虾三级) | 2017-10-12 18:32

@blurs: Chrome啊，两个js代码都起作用了？

Lawliet__zmz | 园豆：4 (初学一级) | 2017-10-12 18:32

@Lawliet__zmz: 作用到是不知道至少运行了我本来也不知道他们的作用是什么。。也看不出来

blurs | 园豆：660 (小虾三级) | 2017-10-12 18:33

@Lawliet__zmz: 好的我看到了返回false的逻辑我找找是什么问题

blurs | 园豆：660 (小虾三级) | 2017-10-12 18:34

@blurs: 正确的是可以显示这个的，另外一个JS代码是显示那个source

Lawliet__zmz | 园豆：4 (初学一级) | 2017-10-12 18:36

@Lawliet__zmz:

function displayAbbreviations() {
      if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    // get all the abbreviations
      var abbreviations = document.getElementsByTagName("abbr");
      if (abbreviations.length < 1) return false;
      var defs = new Array();
    // loop through the abbreviations
      for (var i=0; i<abbreviations.length; i++) {
        var current_abbr = abbreviations[i];
        if (!current_abbr.childNodes.length < 0) continue;  //这一行的这个0 原本是1的 改成0就可以了
        var definition = current_abbr.getAttribute("title");
        var key = current_abbr.lastChild.nodeValue;
        defs[key] = definition;

blurs | 园豆：660 (小虾三级) | 2017-10-12 18:42

@blurs: 卧槽确实啊为什么啊啊？

Lawliet__zmz | 园豆：4 (初学一级) | 2017-10-12 19:19

@blurs: 如果只是一个displayAbbreviations函数 1是可以显示的

Lawliet__zmz | 园豆：4 (初学一级) | 2017-10-12 19:20

@Lawliet__zmz: .这个问题你要去问写代码的人去这只是个单纯的逻辑错误。。我也不知道写代码的人咋想的。。

blurs | 园豆：660 (小虾三级) | 2017-10-12 19:23

@Lawliet__zmz: 好啦我下班了回家了 ~~~~~

blurs | 园豆：660 (小虾三级) | 2017-10-12 19:25

@blurs: 辛苦了。。。。

Lawliet__zmz | 园豆：4 (初学一级) | 2017-10-12 19:26

@blurs:

书上是这么说的。。。。。

Lawliet__zmz | 园豆：4 (初学一级) | 2017-10-12 19:35

看来是版本兼容问题

Lawliet__zmz | 园豆：4 (初学一级) | 2017-10-12 19:37

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

JS一个简单问题，大神进，轻松拿分！

欢迎，请先登录或者注册。