JavaScript - innerHTML 改变更多然后第一次出现加上随机数组

Question

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

首先:我是否尝试使用 .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>

Answer 1

HTML 文档中的 ID 应该是唯一的。函数getElementById只会返回 1 个元素，仅此而已。对于相似元素组，你想给它们一个共同的 class然后使用 getElementsByClassName (注意复数形式的 Elements 与 Element)——此函数不适用于 IE 8 或更早版本，因此如果您需要支持 IE，则必须执行 getElementsByTagName然后仅过滤那些具有您想要的类(class)的类(class)。

就代码的第二部分而言，首先您将 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];
}

And here it is in action.您显然是 Javascript 的新手，所以我鼓励您继续尝试并学习它的基础知识。然而，最终，您会希望研究诸如 jQuery 之类的库，它们可以让编写跨浏览器 Javascript 的许多繁琐工作消失。