无法设置undefined属性 - 使用javascript插入文本

Question

我目前正在尝试在网站http://kawowii.com的特定位置插入一些文字，但是，我不断收到错误消息。这些错误消息似乎源自我尝试使用javascript（变量txtClasses和styleClasses）选择的部分。错误消息是

  

未捕获的TypeError：无法设置属性＆＃39; textContent＆＃39;未定义的

所以，变量似乎未定义，但我不明白为什么。我看了其他的答案，仍然无法确定是什么问题。

现在，我有

window.onload = function() {
    var txtClasses = document.querySelectorAll("div.coord-control.leaflet-control");
    txtClasses[0].textContent = "Server: UP Location:"
}

我试过这个

window.onload = function() {
    var styleClasses = document.querySelectorAll(".coord-control leaflet-control");
    function insertAfter1(referenceNode, newNode) {
        referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    }
    var brk = document.createElement("br");
    insertAfter1(styleClasses[0], brk);
    var div = document.createElement("div");
    var textNode = document.createTextNode("Server: UP")
    div.appendChild(textNode);
    insertAfter1(brk, div);
}

我的最终目标是更改网站kawowii.com，以便在Location :之前使用javascript读取Server: UP。

Answer 1

所以我想象的是：

您正在查询您的页面以获取您的传单控件，但它返回的数组没有任何内容。所以当你尝试访问txtClasses [0]时，它是未定义的（因为txtClasses.length == 0）。

// this illustrates your problem
try {
  
  // I am manually creating an empty array (your results)
  var txtClasses = []
  
  // this throws the error
  txtClasses[0].bad = "throws an error";
  
} catch (e) {
  
  // this just displays the error for you to see
  document.getElementById("log").innerHTML += e.toString()
}

<div id="log"></div>

如果您期待某些东西，您应该检查您的选择器是否正常工作（我想要做的是打开一个Web控制台并在那里键入我的代码）。

我注意到您的选择器也在第一个和第二个示例中发生了变化，因此请务必阅读有关css选择器here的更多信息。

Answer 2

我在您提供的网站上执行了document.querySelectorAll("div.coord-control.leaflet-control");， 实际上显示了包含该元素的数组。

我认为div.coord-control.leaflet-control是动态插入的（可能是在AJAX请求完成后）。

因此，您需要将控制逻辑放在请求的回调中：

whateverRequestIsInsertingThatElement.then(function() {
    var txtClasses = document.querySelectorAll("div.coord-control.leaflet-control");
    txtClasses[0].textContent = "Server: UP Location:"
});

我不知道您是否正在使用承诺，或者您使用的异步方法是否提供回调，但onload将与您的异步请求并行发生，因此您需要在异步请求的回调中查询动态元素。

不确定您在网站上使用哪种API来生成地图，但通常对位置数据的任何调用都会异步发生（例如Google Maps API）。一旦数据到达，您只能操纵动态生成的DOM元素。

修改

您可以看到客户端最初从路由up/configuration获取配置数据。我建议在源代码中查找异步调用的位置，然后在其成功处理程序中调用querySelectorAll。

我还看到，在某些来源中，$.ajax正在被调用，所以我假设在那里，$.ajax被调用到服务器上的up/configuration路由。< / p>