使用javascript"随机引用“;脚本，但跨越两个独立的元素

Using a javascript "random quote" script but across two separate elements

本文关键字：两个 独立 跨越 元素 quot javascript 随机 引用 使用 脚本      更新时间：2023-09-26

我正试图通过编写一个基本网站（使用Twitter Bootstrap）来教自己一些javascript，该网站随机引用了古腾堡计划的一部小说，并对其进行了一些讨论，然后在页面下方有一个链接，可以直接访问古腾堡项目的小说。

我使用了这个JavaScript源代码脚本，效果非常好。。。引用本身。但是，当链接第二个元素时——引用书籍的链接——按钮中的文本不会出现。

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"。

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

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

您可以给链接ID加一个词缀（比如ran1link），使它们是唯一可识别的，并使两个元素都将其display设置为inline。

请注意，您的window.onload技巧并不是真正必要的。addEventListener可以为一个事件附加多个功能。这样就不会与添加onload函数的其他代码发生冲突。

相关文章：