使用javascript；“随机报价”；脚本，但跨越两个单独的元素

我试图通过编写一个基本的网站（使用Twitter引导）来教自己一点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>

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

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本身如下所示：

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

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

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

），以便它们可以唯一地识别，并让这两个元素将其

显示设置为
内联

请注意，您的
window.onload
技巧实际上并不是必需的。有一个
addEventListener
，可以将多个函数附加到一个事件。这样，您就不会与添加
onload
函数的其他代码发生冲突。
您肯定应该用
.childquote>span、.bookbutton>span{display:none；}
或类似的内容来替换css。谢谢，pimvdb——我现在理解getElementById的问题，即使我不太理解您的解决方案。我是否会在messageload函数中放入第二个变量，第一个变量以“ran”作为其变量前缀，另一个变量以“ranquote”作为其前缀，或者类似的东西？@mattshepherd:您当前有一行以
getElementById（'ran'+wch）
显示相应的
ran
项。您可以添加相同的行，但使用例如
getElementById（'ranquote'+wch）
来显示链接。在这种情况下，您需要为链接提供一个ID，如
ranquote1
。