为什么我得到“无法读取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的属性”？

回答

相关问题