放入外部js文件時QuerySelectorAll不起作用

Question

當我輸入以下代碼時：

window.onload = function(){
    var inputs = document.querySelectorAll("input[type=text]");
    console.log(inputs.length);
    for(var j=0; j<inputs.length; j++){
        inputs[j].onclick = function(){
            this.style.width = "500px";
        }
    }
}

進入html頁面，效果很好，但是如果我將其放入外部.js文件中，則for循環永遠不會從輸入開始。length等於0，即使在調用腳本的頁面中有很多輸入也是如此。 可能是什么問題呢？

更新 ：我發現該代碼可以在正常條件下運行，但不能：

• 在以前隱藏的div中包含的輸入中，然后通過js顯示，我的糟糕，隱藏的輸入的類型為“電子郵件”
• 在每個輸入上，如果它們是通過ajax加載的，我都知道為什么：由於該函數僅在窗口加載時才觸發，因此不會看到加載的輸入

Answer 1

通常，腳本標記的位置會影響DOM選擇。 因此，請確保將您的腳本標簽放置在body標簽末尾之前的html文件底部。 也許這可以解決問題！

Answer 2

嘗試使用addEventListener附加功能，而不是設置window.onload ：

window.addEventListener(function() {
    //...
});

如果這解決了您的問題，那么正如@adeneo所說，window.onload將在腳本的其他位置分配，該腳本將覆蓋它可能具有的任何其他值。
這就是為什么通常使用addEventListener更好的原因，因為您可以多次調用它而不覆蓋任何內容。

但是問題也可能只是根本沒有評估您的腳本，您是否嘗試在其中放置一些頂級console.log ？

Answer 3

在發表評論/回答的用戶的幫助下，我發現我嘗試將代碼輸入的某些輸入的類型為“電子郵件”而不是“文本”，而在其他情況下，輸入是通過ajax加載的，因此DOM已加載。 為了解決這些問題，我進行了編輯

var inputs = document.querySelectorAll("input[type=text]");

至

var inputs = document.querySelectorAll("input[type=text],input[type=email]");

當通過ajax加載的內容准備就緒時，我再次調用了該函數。