无法阅读财产＆＃39;价值＆＃39;为null。当我在其他页面

Question

在我的网站上我使用一个名为＆＃34的javascript文件; backend.js＆＃34; 包含所有网站页面的javascript / jquery代码

所以，例如在一个像这样的行的函数中：

var latit = document.getElementById('lat').value;

它在包含id =＆＃39; lat＆＃39;的页面上正常工作 但在其他页面中我在控制台中收到此错误：

  

未捕获的TypeError：无法读取属性＆＃39;值＆＃39;为null

还有风格：

  

未捕获的TypeError：无法读取属性＆＃39; style＆＃39;为null

它会导致在行下面停止执行我的其他功能。

与我的所有文件中包含document.getElementById代码的任何行相同。

我找到了一个解决方案，但我不知道它是否是最好的还是有更好的

我的解决方案是对我文件中的任何document.getElementById进行测试，如下所示：

if (document.getElementById('lat') != null) {
    var latit = document.getElementById('lat').value;
}

这是最好的解决方案吗？

Answer 1

您收到这些错误的原因是您正在编写的Web应用程序具有各种状态，并且并非所有状态都具有您指定的元素。

如果这是SPA网络应用程序（单页面应用程序）的问题，您需要实现某种程度的路由，以便您只为每个页面加载适当的javascript < / em>在应用程序中。

如果这是一个在许多页面上使用的库，你需要检查它所在的页面，并假设只有那里应该存在的元素。

如果这是一个仅在一个页面上使用的库，它是一个动态变化但非SPA的Web应用程序，您需要检查应用程序状态并仅假设应该存在的元素在那里。

Answer 2

无需拨打getElementById两次。您可以将第一个调用的结果存储在变量中。

var lat = document.getElementById('lat');
if(lat) {
  var latit = lat.value;
}

如果您不想要其他变量，也可以使用

var latit = (document.getElementById('lat') || {}).value;

或|| Object.create(null)如果您害怕Object.prototype.value可能存在。