0

Project Gutenberg の小説からのランダムな引用とそれに関するいくつかの議論を提示する基本的な Web サイト (Twitter Bootstrap を使用) を作成することで、JavaScript を少し独学しようとしています。ページのさらに下には、直接アクセスできるリンクがあります。 Project Gutenbergの小説に。

私はこのJavaScript ソース スクリプトを非常に効果的に使用しました... 引用自体に。しかし、2 番目の要素 (引用された本へのリンク) へのリンクに関しては、ボタン内のテキストは表示されません。

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 は、ページ上のすべてのランダム オプションに対して「none」を表示します。

#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」が設定されていないかのように。

しかし、これと同じロジックがリンクまで適用されないのはなぜでしょうか? ランダムな引用は問題なく取得できますが、ボタンのテキストはまったく表示されません。

4

1 に答える 1

1

関数は と呼ばれるgetElementByIdため、多くても 1 つの要素しか返されません。実際、ID はページ上で一意である必要があります。これが ID の概念です。

リンク ID に接辞 (たとえばran1link) を付けて一意に識別できるようにし、両方の要素を に設定するdisplayことができinlineます。

window.onloadあなたのトリックは本当に必要ではないことに注意してください。addEventListenerイベントに複数の機能を追加できるものがあります。そうすれば、関数を追加する他のコードと衝突することはありませんonload。

于 2012-07-10T17:00:38.040 に答える