爲什麼我得到「無法讀取html undefined的屬性」？

我正在構建一個簡單的計數器來練習JS中的閉包，而且我似乎無法越過這個錯誤。在我看來，將變量elem設置爲canv的id應該可行，但顯然不能連接。我在這裏做錯了什麼？爲什麼我得到「無法讀取html undefined的屬性」？

我的HTML：

<body> 
    <div id="canv"> 

    </div> 
</body>

我的JS：

function setup(delay) { 
    var el = document.getElementById('canv'); 

    counterFn(el, delay); 
} 

function counterFn(el, delay) { 
    var counter = 0; 

    setInterval(getTime, delay); 

    function getTime(el) { 
    el.innerHTML(counter); 
    counter++; 
    } 
} 

setup(500);

這一切都讓人感覺很基本的，但我似乎無法找出什麼我做錯了。

這是一個JS小提琴。 https://jsfiddle.net/8sjaqdrh/2/

來源

2017-07-28 crescentfresh

您的JavaScript何時運行？它可能試圖訪問你的畫布，然後它存在於DOM中，因此'document.getElementById（'canv'）'會給出'undefined'。儘管如此，當你調用getTime時，你並沒有給出本地'el'的值，所以在這種情況下它也不會被定義。您需要解決這兩個問題才能使其發揮作用。 –

@PatrickBarr哎呀我沒有意識到這一點。但是我從innerHTML開始，這是一個確切的錯誤。（儘管更新我的帖子） – crescentfresh

'getTime'需要一個參數，但它永遠不會被傳遞。參數列表中的'el'使其成爲'getTime'的局部變量，外部作用域中的'e'被映射。 Aand'innerHTML'不是一個函數。 – Teemu

導致錯誤的原因是因爲el未在getTime的範圍內定義。

在的getTime的父範圍counterFn，el定義，因爲你在counterFn(el, delay)調用內部setup功能，這是el = document.getElementById('canv')當它把它的值。

但是，在getTime的範圍內，您沒有提供el的值。因此el變爲undefined。

代碼的另一個問題是innerHTML的錯誤用法。

只要將參數從function getTime(el){...刪除到function getTime(){...即可。

至於innerHTML，它不是一個函數。所以它不能像innerHTML(counter)那樣被調用。

正確的方法是直接給它分配一個值，如innerHTML = counter。

function setup(delay) { 
 
    var el = document.getElementById('canv'); 
 

 
    counterFn(el, delay); 
 
} 
 

 
function counterFn(el, delay) { 
 
    var counter = 0; 
 

 
    setInterval(getTime, delay); 
 

 
    // Corrected code: 
 
    function getTime() { 
 
    el.innerHTML = counter; 
 
    counter++; 
 
    } 
 
    
 
    /* Your code 
 
    function getTime(el){ 
 
    el.innerHTML(counter); 
 
    counter++; 
 
    } 
 
    */ 
 
} 
 

 
setup(500);

<div id="canv"></div>

這裏

來源

2017-07-28 19:16:06

我認爲最大的問題是在不調用函數的情況下將'el'作爲參數傳遞給'getTime'。我搞砸了我的jsfiddle編輯，所以我不小心在這裏發佈它作爲'innerHTML（counter）'。謝謝你的幫助！我需要不斷練習調試。 – crescentfresh

一個潛在的問題是，你想之前在DOM存在，讓畫布，你會想包裝在window.onload事件代碼，以防止這種情況發生。

接下來的代碼波紋管在這裏：

setInterval(getTime, delay);

您定義getTime作爲期待一個參數，但沒有通過一個，而不是你會希望你到：

setInterval(function(){ getTime(el); }, wait);

最後el.innerHTML(counter);應該el.innerHTML = counter; 。

Working Fiddle here

來源

2017-07-28 19:16:11

爲什麼我得到「無法讀取html undefined的屬性」？

回答

相關問題