1

不可解なことが 2 つあります。

最初: .innerHTML を使用して、最初の出現以上のものを変更しようとしていますか。
2 番目: .innerHTML をランダムな単語に置き換えようとしているということです。

私は最初の単語を変更することしかできませんでした。すべてに加えて、ランダムは完全に失敗しました。 

Hello <p id="p1">World!</p>
Hello <p id="p1">World!</p>
Hello <p id="p1">World!</p>

<script type="text/javascript">

document.getElementById("p1").innerHTML="newWorld()";

function newWorld() {
  var worlds = new Array ("Pluto!", "Mars!", "Saturn!", "Earth!", "Mercury!");

var whichWorld = Math.floor(Math.random()*worlds.length); 

worlds[whichWorld](); 
};

</script>

4

5 に答える 5

3

HTMLドキュメントのIDは、一意であることが意図されています。この関数getElementByIdは1つの要素のみを返し、それ以上は返しません。類似の要素のグループの場合、それらをすべて共通classにしてから使用する必要がありますgetElementsByClassName（複数の要素と要素に注意してください）-ただし、この関数はIE 8以前では機能しません。したがって、IEをサポートする必要がある場合は、実行してからgetElementsByTagName、必要なクラスを持つものだけをフィルタリングします。

コードの2番目の部分に関しては、最初に、innerHTMLをnewWorld()関数の戻り値ではなく実際の文字列に設定しています（現在、内部から何かを返しているわけではないため、これはありませんnewWorld）-私はあなたが意図したと思いますしますdocument.getElementById("p1").innerHTML = newWorld();。第二に、コードのランダムな部分は正しく、毎回ランダムな惑星を選択する必要があります。コードの終わりは少し不可解ですが、正確にはそこで何をしようとしていますか？worlds[whichWorld]呼び出し可能な関数ではなく、文字列（Earth!など）になります。関数worldsの配列である場合、コードは機能します（innerHTMLとして設定する予定なので、コードも返したと仮定します）

要するに、このようなものは<span>、親要素内のすべての要素をランダムな惑星に設定するための「適切な」方法です。

<div id="planets">
    <p>Hello <span>World!</span></p>
    <p>Hello <span>World!</span></p>
    <p>Hello <span>World!</span></p>
</div>

そしてJavascript：

var spans = document.getElementById('planets').getElementsByTagName('span');
for(var i = 0; i < spans.length; i++) {
    spans[i].innerHTML = randomWorld();
}

function randomWorld() {
    var worlds = ["Pluto!", "Mars!", "Saturn!", "Earth!", "Mercury!"];
    var whichWorld = Math.floor(Math.random() * worlds.length);
    return worlds[whichWorld];
}

そして、ここでそれは実行中です。あなたは明らかにJavascriptに慣れていないので、JavaScriptの基本を学び続けることをお勧めします。ただし、最終的には、クロスブラウザーJavascriptを作成するという面倒な作業の多くを解消するjQueryなどのライブラリーを調べたいと思うでしょう。

于 2012-08-09T21:33:36.060 に答える
1

HTMLによると、標準IDは一意である必要があるため、getElementByIdは常に1つの要素（通常はHTMLで最初に見つかった要素）を返します。

あなたは書くことができます：

Hello <p class="planet">World!</p>
Hello <p class="planet">World!</p>
Hello <p class="planet">World!</p>

<script type="text/javascript">
  var planets = document.getElementsByClassName("planet")
  for (var i=0; i < planets.length; i++) {
      planets[i].innerHTML = newWorld();
  }

  function newWorld() {
    var worlds = new Array ("Pluto!", "Mars!", "Saturn!", "Earth!", "Mercury!");
    var whichWorld = Math.floor(Math.random()*worlds.length); 
    return worlds[whichWorld]; 
  }
</script>

jQueryが質問の範囲外であることは知っていますが、jQueryなどのライブラリ（および同一のIDを使用しない）を使用すると、1つのステートメントで複数の要素のコンテンツを変更できます...

于 2012-08-09T21:33:36.247 に答える
1

querySelectorAllまたはgetElementsByTagNameまたはなどの要素のグループを提供する関数を使用しますgetElementsByClassName。

Hello <p class="world">World!</p>
Hello <p class="world">World!</p>
Hello <p class="world">World!</p>

<script type="text/javascript">
var newWorld = function () {
    var worlds = new Array ("Pluto!", "Mars!", "Saturn!", "Earth!", "Mercury!");
    var whichWorld = Math.floor(Math.random()*worlds.length); 

    return worlds[whichWorld]; 
};

var worlds = document.getElementsByClassName("world");

for (var i=0; i < worlds.length; i++) {
    worlds[i].innerHMTL = newWorld();
}

</script>
于 2012-08-09T21:37:58.837 に答える
1

HTML の ID は一意である必要があります。そのため、このgetElementByIdメソッドは、指定された ID を持つ最初の要素のみを返します。すべてのロジックが正しいですが、答えを少し単純化できます。ID をクラスに変更し、次のgetElementsByClassNameようにメソッドを使用します。

Hello <span class="p1">World!</span>
Hello <span class="p1">World!</span>
Hello <span class="p1">World!</span>

<script type="text/javascript">
    var worlds = ["Pluto!", "Mars!", "Saturn!", "Earth!", "Mercury!"];

    var pTags = document.getElementsByClassName("p1");
    for (i = 0; i < pTags.length; i++)
    {
        pTags[i].innerHTML = worlds[Math.floor(Math.random() * worlds.length)];
    }
​&lt;/script>

デモ

このgetElementsByClassNameメソッドは IE8 以前では機能しないことに注意してください。したがって、これらのブラウザーとの下位互換性を持たせたい場合は、 を使用getElementsByTagNameして手動でフィルター処理するか、jQuery を使用する必要があります。

JAVASCRIPT デモ、すべてのブラウザで動作

JQuery デモ

于 2012-08-09T21:49:08.913 に答える
0

複数の要素をマークするには、クラス属性を使用する必要があります。DOMの複数の要素は、クラス属性の同じ値を持つことができますが、 id属性の値は一意である必要があります。

したがって、例は次のようになります。

<button id="change-world-btn">Change World</button>
<hr />
<h4>Elements with target class name:</h4>
Hello <span class="world-name">World!</span><br />
Hello <span class="world-name">World!</span><br />
Hello <span class="world-name">World!</span><br />
<hr />
<h4>Element with different class name:</h4>
Hello <span class="other-class">World!</span><br />

<script type="text/javascript">
    var worlds = new Array ("Pluto!", "Mars!", "Saturn!", "Earth!", "Mercury!");

    function newWorld() {
        return worlds[Math.floor(Math.random() * worlds.length)];
    }

    elements = document.getElementsByTagName('span');

    document.getElementById('change-world-btn').onclick = function() {
        world = newWorld();
        for(var i = 0, el; el = elements[i++];) {
            if(el.className == 'world-name') {
                el.innerHTML = world;
            }
        }
    };
​&lt;/script>

それを試してみてください。

また、document.getElementsByClassName関数を使用してタスクを簡略化することもできますが、この関数はIE<9ではサポートされていません。

于 2012-08-09T22:04:33.687 に答える