时间戳

首页 > 解决方案 > 将变量传递到 document.getElementById() - Javascript

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

问题描述

我正在运行一个函数，该函数用一周中的几天填充网页上的几个段落标签。该函数采用基于当天填充的天数组（即，如果今天是星期四，则按顺序获取接下来的 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();

标签： javascripthtmlarraysgetelementbyid

解决方案

您的代码有一些问题：

  1. i的第一个值为0。既然没有元素#forecastDay0，getElementById就会返回null。尝试访问innerHTMLofnull将引发错误，从而破坏for循环及其之后的所有内容。当某些东西不起作用时，您应该检查您的控制台，这是调试的好方法。
  2. 循环检查不for应该是.i < arry.lengthi < arry.length - 1
  3. 你不需要任何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
    }
}

推荐阅读