Question

我正在运行一个函数，该函数用星期几填充网页上的多个段落标签。该函数需要一系列天数，这些天数是根据当天（例如今天是星期四，请按顺序获取接下来的7天）填充的。

我的问题是由于某种原因，我无法填充这些标签。我已经检查以确保该数组正在填充并且列表正在迭代中。虽然这两个都是正确的，但标记的内部HTML均未更改。

HTML：

<p class="mb-1" id="forecastDay1" runat="server">Day</p>
<p class="mb-1" id="forecastDay2" runat="server">Day</p>

JavaScript函数：

function populatePage(arry) {
    var i;

    for (i = 0; i < arry.length - 1; i++) {
        var id = "forecastDay" + i.toString();
        document.getElementById(id).innerHTML = arry[i].toString();
    }
}

我也尝试过这种方式：

document.getElementById("forecastDay" + i.toString()).innerHTML = arry[i].toString();

Answer 1

您的代码有些错误：

i的第一个值为0。由于没有元素#forecastDay0，因此getElementById将返回null。尝试访问innerHTML中的null会引发错误，从而中断for循环及其后的所有操作。当某些功能不起作用时，您应该检查控制台，这是调试的一种好方法。
对for循环的检查应该是i < arry.length而不是i < arry.length - 1。
您不需要任何toString通话。

话虽如此，这应该是这样：

function populatePage(arry) {
    var i;
    for (i = 0; i < arry.length; i++) {
        var id = "forecastDay" + (i + 1);                         // i + 1 instead of just i. The casting to strings is done automatically
        document.getElementById(id).textContent = arry[i];        // use textContent as there isn't really any HTML
    }
}

Answer 2

JavaScript中不需要toString。

此外，数组从0开始，而元素从1开始。您必须弥补这一差额。

function populatePage(arry) {
  var i;

  for (i = 0; i < arry.length; i++) {
    var id = "forecastDay" + (i + 1);
    document.getElementById(id).innerHTML = arry[i];
  }
}

// Test it
populatePage(["Day 1", "Day 2"]);

<p class="mb-1" id="forecastDay1" runat="server">Day</p>
<p class="mb-1" id="forecastDay2" runat="server">Day</p>

将变量传递到document.getElementById（）-Javascript

2 个答案: