Question

使用 object.keys 和 foreach 通过 id 获取文档元素来显示数据时出错

2018-12-03

76

javascript

目前，我正在尝试让我的 js 脚本显示对象 udata 中的数据。

我一直收到错误：

Uncaught TypeError: Cannot read property 'innerHTML' of null.

我已经使用字符串 ( var str = 'test' ) 进行了测试，并且没有出现错误，但是一旦我切换到使用 itemValue 作为要检查的 id，我就会收到错误。我尝试使用 .toString() 将键设为字符串，但这也不起作用。不知道该怎么做。 != null 语句应使 foreach 避免在少数情况下对象键不打算与 html 中的 id 相对应时执行空操作。

我将不胜感激任何帮助！

if(localStorage.udata != null){
    var udata = JSON.parse(localStorage.getItem('udata'));

    Object.keys(udata).forEach(function (itemValue) {
        if(document.getElementById(itemValue).innerHTML != null)
            document.getElementById(itemValue).innerHTML = udata[itemValue];
    });

Answer 1

您的检查实际上导致了错误。您必须检查

 document.getElementById(itemValue)

是否为 null ，尝试访问 .innerHTML 会导致错误。

Answer 2

The != null statement should make the foreach avoid the null operations in the few cases the object key is not intended to correspond to an id in the html.

这是不正确的。如果 ID 为 itemValue 的元素不存在，则 document.getElementById(itemValue) 将为 null ，因此尝试在该 null 值上使用 .innerHTML 是导致错误的原因。您需要检查 document.getElementById(itemValue) != null 。