1

我有两件莫名其妙的事情，

第一：我是否正在尝试使用 .innerHTML 进行更改，而不仅仅是第一次出现。
第二：是我试图用一个随机词替换.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（注意复数 Elements vs Element） - 但是，这个函数不适用于 IE 8 或更早版本，所以如果你需要支持 IE，你会拥有做getElementsByTagName，然后只过滤那些有你想要的课程的人。

至于代码的第二部分，首先您将 innerHTML 设置为实际字符串newWorld()，而不是函数的返回值（没有，因为您当前没有从 inside 返回某些内容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 的新手，所以我鼓励您继续尝试并学习它的基础知识。然而，最终，您将希望研究 jQuery 等库，这些库可以消除编写跨浏览器 Javascript 的许多乏味。

于 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），可以用一个语句更改多个元素的内容......

于 2012-08-09T21:33:36.247 回答
1

使用为您提供一组元素的函数，例如querySelectorAllorgetElementsByTagName或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 演示，适用于所有浏览器

查询演示

于 2012-08-09T21:49:08.913 回答
0

要标记多个元素，您应该使用类属性。DOM 中的多个元素可以具有相同的class属性值，但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 回答