我目前正試圖插入一些文本在網站上的特定點，http://kawowii.com，但是，我不斷收到錯誤消息。這些錯誤消息似乎源自我試圖用javascript（變量txtClasses和styleClasses）選擇的部分。錯誤消息是無法設置屬性的undefined - 插入文本的javascript

Uncaught TypeError: Cannot set property 'textContent' of undefined

所以，變量似乎是未定義的，但我不明白爲什麼。我看了其他答案，仍然無法確定哪裏出了問題。

現在，我有

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 :之前，它讀取Server: UP使用JavaScript 。

來源

2015-09-18 ActionON

我不確定爲什麼當您使用原始DOM時這是用jquery標記的。無論如何，請檢查您的選擇器。 txtClasses顯然返回0結果，因此在數組中引用0（實際上是一個NodeList）會給出未定義的結果，並且不能引用未定義的屬性。 – Ixonal

我可以使用jQuery，所以我標記了它。 – ActionON

如果沒有與選擇器匹配的元素，將會出現該錯誤，因爲未定義「txtClasses [0]」。 – Barmar

我在您提供的網站上執行了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生成您網站上的地圖，但通常對位置數據的任何調用將同步發生（如谷歌地圖API，例如）。一旦數據到達，您只能操作動態生成的DOM元素。

編輯

你可以看到，客戶端最初從路線up/configuration獲取配置數據。我會建議尋找源代碼中異步調用的位置，然後在其成功處理程序中調用querySelectorAll。

我也看到，在一些你的源代碼，$.ajax被調用，所以我在那裏承擔什麼地方，$.ajax被調用時，您的服務器上up/configuration路線。

來源

2015-09-18 21:47:10

是的，我認爲這是發生了什麼。代碼正在窗口加載運行，這很可能在動態內容生成之前發生。 – Ixonal

有沒有找到控制邏輯插入它的方法？ – ActionON

@ActionON不幸的可能不是。 DOM操作需要在異步請求的成功回調中發生。 –

所以我想象的情況是這樣的：

您要查詢的頁面爲您的小冊子控制，但其恢復的任何內容的陣列。所以當你試圖訪問txtClasses [0]時它的undefined（因爲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。

來源

2015-09-18 21:44:41 Matt

無法設置屬性的undefined - 插入文本的javascript

回答

編輯

相關問題