Question

我正在尝试通过编写一个基本网站（使用Twitter Bootstrap）来教自己一些javascript，这个网站提供了一个项目古腾堡小说的随机引用，对它的一些讨论，然后在页面的下方有一个链接直接进入古腾堡计划的小说。

我已经使用这个JavaScript Source script对报价本身产生了很大影响。但是，当涉及链接第二个元素 - 引用书籍的链接时 - 按钮中的文本不会出现。

HTML看起来像这样：

<div class="childquote">
                <p>
                <span id="ran1">&#8220;Quote from a first novel.&#8221;<br>
                - Bram Stoker, <em>Dracula</em></span>
                <span id="ran2">&#8220;Quote from a second novel.&#8221;<br>
                - Herman Melville, <em>Moby Dick</em></span>

以及稍后页面，按钮HTML如下所示：

 <div class="btn pull-right bookbutton">
                <span id="ran1"><a href="http://www.gutenberg.org/ebooks/345">Read the book</a></span>
                <span id="ran2"><a href="http://www.gutenberg.org/ebooks/2701">Read the book</a></span>

......显然，所有适当的div都已关闭等等。

对于页面上的所有随机选项，页面集的CSS显示为“无”：

#ran1,#ran2,#ran3,#ran4,#ran5,#ran6,#ran7,#ran8,#ran9,#ran10,#ran11,#ran12,#ran13,#ran14,#ran15,#ran16,#ran17,#ran18 {
  display:none;
}

JavaScript本身看起来像这样：

function messageLoad() {

  var wch=Math.floor(Math.random()*18+1);
  document.getElementById('ran'+wch).style.display='inline';
}

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

addLoadEvent(function() {
  messageLoad();
});

据我所知，因为我根本不理解JavaScript ，所以JavaScript会以某种方式“停用”随机选择的“ranXX”的“display：none”CSS，以便第一部分 - 引用 - 将显示为没有为该随机数设置“display：none”。

但为什么这个相同的逻辑不适用于链接？我得到随机引用很好，但按钮文本根本没有出现。

Answer 1

该函数名为getElementById，因此它最多只能返回一个元素。实际上，ID在页面上应该是唯一的 - 这就是ID的概念。

您可以为链接ID添加词缀（例如ran1link），以便唯一可识别，并将这两个元素设置为display到{{1} }。

请注意，您的inline技巧并不是必需的。 window.onload可以将多个函数附加到事件中。这样，您就不会与添加addEventListener函数的其他代码发生冲突。

使用javascript“随机引用”脚本，但跨两个单独的元素

1 个答案: