开发者问题收集

改变整个类或数组的 innerHTML 的最佳方法是什么？

2020-01-02
52
javascript arrays for-loop foreach

当我运行此代码时，它会更改所有 volunteersName 和第一组其他项目。一旦循环，它就不会更改其他值。希望有人能帮我找到我的问题。我猜我不能为此使用循环，可能需要使用 forEach？不确定如何正确地做到这一点。提前致谢。

编辑：我收到以下控制台错误

未捕获 TypeError：无法读取 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;
    }
3个回答

问题在于您的循环语法。 

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

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

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

更改为： 

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

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

Mitya
2020-01-02

您可以使用 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;
    }
Shiv Kumar
2020-01-02

好的，所以我用 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;
    }

}
Tim
2020-01-02