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

JavaScript - innerHTML to change more then first occurrence plus random array

本文关键字：随机 第一次 数组 然后 innerHTML JavaScript      更新时间：2023-09-26

我有两件令人困惑的事情发生，

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

HTML

文档中的ID应该是唯一的。函数 getElementById 将只返回 1 个元素，仅此而已。对于相似元素的组，您希望为它们提供一个通用class然后使用getElementsByClassName（注意复数元素与元素） - 但是，此功能不适用于IE 8或更早版本，因此，如果您需要支持IE，则必须执行getElementsByTagName，然后仅过滤那些具有所需类的元素。

就代码的第二部分而言，首先您将 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的新手，所以我鼓励你继续尝试学习它的基础知识。然而，最终，你会想要研究像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>

我知道 jQuery 超出了问题的范围，但是对于像 jQuery 这样的库（并且不使用相同的 id），可以用一个语句更改多个元素的内容......

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)];
    }
​</script>

演示

请注意，getElementsByClassName方法在 IE8 或更早版本中不起作用。 因此，如果您希望它向后兼容这些浏览器，则需要使用该getElementsByTagName并手动过滤它们或使用jQuery。

JAVASCRIPT DEMO，适用于所有浏览器

JQUERY演示

使用一个

函数，给你一组元素，如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>

要标记多个元素，应使用 class 属性。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;
            }
        }
    };
​</script>

试试吧。

您也可以使用 document.getElementsByClassName 函数来简化任务，但在 IE <9 中不支持此功能。

相关文章：