用.getElementById抓取元素時爲空

我想抓住一個元素（一個按鈕）並在其上添加一個事件偵聽器。每當我跑用.getElementById抓取元素時爲空

var button = document.getElementById('clickMe'); 
console.log(button); // null

我檢查我的JavaScript文件加載和檢查，一切是區分大小寫的。這是我的HTML和JS文件：

HTML：

<!doctype html> 
<html> 
    <head> 
    <script src="js/timer.js"></script> 
    </head> 
    <body> 
     <button id='clickMe' type='button'>Hello</button> 
    </body> 
</html>

var button = document.getElementById('clickMe'); 
console.log(button); 
function buttonClicked() { 
    alert('the button was clicked'); 
} 

button.addEventListener('click', buttonClicked); 

function timerComplete() { 
    alert('timer complete'); 
} 

setTimeout(timerComplete, 2000);

我已經找到了，我做到了camel大小寫的getElementById最常見的錯誤。

有誰知道爲什麼我一直得到空？是否試圖在加載之前獲取元素？

來源

2014-02-21 HelloWorld

腳本中的DOM之前執行加載，所以該元素是不存在的第一個地方，通過有針對性你的腳本。將腳本加載到文檔的末尾或使用document.onload在腳本執行時加載DOM。 – Arbel

是的，它試圖在加載之前獲取元素。看看[window.onload]（https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload） – acbabis

您的Javascript代碼在Button添加到DOM之前執行。你可以你的HTML改成這樣：

<!doctype html> 
<html> 
    <body> 
     <button id='clickMe' type='button'>Hello</button> 
     <script src="js/timer.js"></script> 
    </body> 
</html>

甚至更好，如果你不介意讓你的JS代碼更復雜一點，你可以等待你的DOM元素執行代碼的那部分之前加載：

document.addEventListener('DOMContentLoaded', function() { 
    var button = document.getElementById('clickMe'); 
    console.log(button); 
});

如果你使用這個JS，你可以把後面的腳本標籤回頭

來源

2014-02-21 21:11:26

這個，即使它有效，看起來對我來說也是錯誤的。這個問題的代碼期待得到一個'$（document）.ready（）'... – htatche

這是一個快速修復。當然最好的方法是等待dom準備好。但是如果沒有涉及JQuery，它會使新手開發人員的實現複雜化 –

感謝球員們，是的，我只是想通過回調獲得一些練習。我以前沒有看到這個愚蠢的錯誤。感謝修復@emilioicai – HelloWorld

用.getElementById抓取元素時爲空

回答

相關問題