JavaScript-innerHTML更改的次数超过第一次出现的次数加上随机数组

我有两件令人困惑的事

第一：我正在尝试使用.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>

你好
世界
你好，世界

你好，世界

document.getElementById（“p1”）.innerHTML=“newWorld（）”；
函数newWorld（）{
var worlds=新阵列（“冥王星！”、“火星！”、“土星！”、“地球！”、“水星！”）；
var whichWorld=Math.floor（Math.random（）*worlds.length）；
世界[哪个世界]（）；
};

---

HTML文档中的ID是唯一的。函数

getElementById

将只返回1个元素，仅此而已。对于类似元素的组，您希望为它们提供一个通用的

类

，然后使用

getElementsByClassName

（注意复数元素vs元素）-但是，此函数不适用于IE 8或更早版本，因此，如果您需要支持IE，则必须执行

getElementsByTagName

，然后只过滤那些具有所需类的内容

至于代码的第二部分，首先您将innerHTML设置为实际字符串

newWorld（）

而不是函数的返回值（没有返回值，因为您当前没有从

newWorld

中返回内容）-我想您的意思是执行

document.getElementById（“p1”）。innerHTML=newWorld（）;。其次，代码的随机部分是正确的，每次都应该选择一个随机行星。然而，代码的结尾有点令人费解——您到底想做什么
worlds[whichWorld]
将是一个字符串（
Earth！
等），而不是一个可调用的函数。如果
worlds
是一个函数数组，那么代码可以工作（假设您也返回了它，因为您打算将它设置为innerHTML）

简言之，这样做是将父元素中的所有
元素设置为随机行星的“正确”方法：

<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];
}

var span=document.getElementById（'plants'）.getElementsByTagName（'span'）；
对于（变量i=0；i

您显然是Javascript新手，因此我鼓励您继续尝试并学习Javascript的基础知识。但是，最终，您将需要研究jQuery之类的库，它们可以消除编写跨浏览器Javascript的许多繁琐工作。
HTML文档中的ID应该是唯一的。函数
getElementById
将只返回1个元素，仅此而已。对于类似元素的组，您希望为它们提供一个通用的
类
，然后使用
getElementsByClassName
（注意复数元素vs元素）-但是，此函数不适用于IE 8或更早版本，因此，如果您需要支持IE，则必须执行
getElementsByTagName
，然后只过滤那些具有所需类的内容

至于代码的第二部分，首先您将innerHTML设置为实际字符串
newWorld（）
而不是函数的返回值（没有返回值，因为您当前没有从
newWorld
中返回内容）-我想您的意思是执行
document.getElementById（“p1”）。innerHTML=newWorld（）;。其次，代码的随机部分是正确的，每次都应该选择一个随机行星。然而，代码的结尾有点令人费解——您到底想做什么
worlds[whichWorld]
将是一个字符串（
Earth！
等），而不是一个可调用的函数。如果
worlds
是一个函数数组，那么代码可以工作（假设您也返回了它，因为您打算将它设置为innerHTML）

简言之，这样做是将父元素中的所有
元素设置为随机行星的“正确”方法：

<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];
}

var span=document.getElementById（'plants'）.getElementsByTagName（'span'）；
对于（变量i=0；i

您显然是Javascript新手，因此我鼓励您继续尝试并学习Javascript的基础知识。但是，最终，您会希望查看jQuery之类的库，它们可以消除编写跨浏览器Javascript的许多繁琐工作。
根据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>  

你好
世界
你好，世界

你好，世界

var planets=document.getElementsByClassName（“行星”）
对于（变量i=0；i<1.length；i++）{
行星[i].innerHTML=newWorld（）；
}
函数newWorld（）{
var worlds=新阵列（“冥王星！”、“火星！”、“土星！”、“地球！”、“水星！”）；
var whichWorld=Math.floor（Math.random（）*worlds.length）；
返回世界[哪个世界]；
}

我知道jQuery已经超出了问题的范围，但是有了jQuery这样的库（并且不使用相同的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;
            }
        }
    };
​</script>