更改整个类或数组的 innerHTML 的最佳方法？答案

【问题标题】：Best way to change the innerHTML for an entire class or arrray?更改整个类或数组的 innerHTML 的最佳方法？
【发布时间】：2020-01-02 10:46:20
【问题描述】：

当我运行此代码时，它会更改所有的志愿者姓名，并且只更改第一组其他项目。一旦它循环它就不会改变其他值。希望有人可以帮助我找到我的问题。我猜我不能为此使用循环，也许需要使用 forEach？不确定如何正确执行此操作。提前致谢。

编辑：我在下面收到此控制台错误

未捕获的类型错误：无法读取 null 的属性“值”

function invite() {
    for (index = 1; index >= volunteersName.length; index++) {
            var names = [document.getElementById("volunteersName" + index).value];
            document.getElementById("name" + index).innerHTML = names
            document.querySelector(".organizationName2").innerHTML = document.getElementById("organizationName").value;
            document.querySelector(".eventDate2").innerHTML = document.getElementById("eventDate").value;
            document.querySelector(".websiteURL2").innerHTML = document.getElementById("websiteURL").value;
            document.querySelector(".hostName2").innerHTML = document.getElementById("hostName").value;
    }

【问题讨论】：

类的querySelector返回一个数组，不能改变数组的innerHtml，必须使用索引来改变类的innerHtml。
您正在将innerHTML 分配给一个数组。
循环按原样运行。当我进行更改时，您说它会停止循环并使name 和其他项目一样停止工作。
是的，但我不确定如何在没有循环的情况下正确更改数组的 innerHTML。

标签： javascript arrays for-loop foreach

【解决方案1】：

问题在于你的循环语法。

for (index = 1; index >= volunteersName.length; index++) {

这表示只要index 等于或大于数组的长度，循环就应该运行。

因此，除非您的数组中有 1 或 0 个项目，否则它将永远不会运行，因为 index 从 1 开始。

改为：

for (index = 1; index <= volunteersName.length; index++) {

...所以只要index 等于或小于数组的长度，循环就会运行。

【讨论】：

仍然无法工作 :-/ 我在 var names = 线上收到了 Uncaught TypeError: Cannot read property 'value' of null
那么你的 DOM 不包含你认为的元素。具体来说，不存在ID匹配“volunteersName”+index的当前值的元素
我得到了它与我的答案中的代码一起工作，但我仍然遇到同样的错误。我不确定它如何插入正确的值，但我仍然得到Uncaught TypeError: Cannot read property 'value' of null
我只能重复 :) 该错误明确表示您的 DOM 不包含具有您当前正在查找的 ID 的元素（在循环中）。请随时为所有帮助投票：-D
如果您可以在 Fiddle 或 Core Pen 中重新创建，我会证明您的问题。

【解决方案2】：

您可以使用querySelectorAll 并遍历索引，而不是使用querySelector。

function invite() {
    for (index = 1; index <= volunteersName.length; index++) {
            var names = [document.getElementById("volunteersName" + index).value];
            document.getElementById("name" + index).innerHTML = names
            document.querySelectorAll(".organizationName2")[index-1].innerHTML = document.getElementById("organizationName").value;
            document.querySelectorAll(".eventDate2")[index-1].innerHTML = document.getElementById("eventDate").value;
            document.querySelectorAll(".websiteURL2")[index-1].innerHTML = document.getElementById("websiteURL").value;
            document.querySelectorAll(".hostName2")[index-1].innerHTML = document.getElementById("hostName").value;
    }

【讨论】：

【解决方案3】：

好的，所以我让它与querySelectorAll 答案一起正常工作，但由于某种原因我需要保留index >= volunteersName

这是使它在下面正确执行的代码

function invite() {
    for (index = 1; index >= volunteersName.length; index++) {
            var names = [document.getElementById("volunteersName" + index).value];
            document.getElementById("name" + index).innerHTML = names
            document.querySelectorAll(".organizationName2")[index-1].innerHTML = document.getElementById("organizationName").value;
            document.querySelectorAll(".eventDate2")[index-1].innerHTML = document.getElementById("eventDate").value;
            document.querySelectorAll(".websiteURL2")[index-1].innerHTML = document.getElementById("websiteURL").value;
            document.querySelectorAll(".hostName2")[index-1].innerHTML = document.getElementById("hostName").value;
    }

}

【讨论】：