将变量传递给 document.getElementById() - Javascript

Question

我是运行一个用星期几填充网页上几个段落标签的函数。该函数采用基于当前日期填充的天数数组（即，如果今天是星期四，则按顺序获取接下来的 7 天）。

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

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 将 return null。尝试访问 null 的 innerHTML 将抛出错误，从而打破 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

Pass variable into document.getElementById() - Javascript

html

javascript

arrays

getelementbyid