为什么会出现“无法读取未定义的html属性”？
[英]Why am I getting “Cannot read property of html undefined”?
问题描述
I am building a simple counter to practice closures in JS, and I can't seem to get past this error. 
我正在建立一个简单的计数器来练习JS中的闭包，但似乎无法克服此错误。 In my mind setting the variable elem to the id of canv should work, but something is obviously not connecting. 在我看来，将变量elem设置为canv的id应该可以，但是显然没有任何联系。 What am I doing wrong here? 我在这里做错了什么？
My HTML: 我的HTML：
<body>
<div id="canv">
</div>
</body>
My JS: 我的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);
This all feels very elementary but I can't seem to figure out what I am doing wrong. 这一切感觉非常基础，但是我似乎无法弄清楚自己在做什么错。
Here's a JS fiddle. 这是一个JS小提琴。 https://jsfiddle.net/8sjaqdrh/2/ https://jsfiddle.net/8sjaqdrh/2/
2 个解决方案
解决方案1
2 已采纳 2017-07-28 19:16:06
The thing that caused the error is because el is not defined within the scope of getTime . 导致该错误的原因是，未在getTime范围内定义el 。
In getTime's parent scope counterFn , el is defined because you gave it a value when calling it in counterFn(el, delay) inside setup function, which is el = document.getElementById('canv') . 在getTime的父作用域counterFn ，定义了el是因为在setup函数el = document.getElementById('canv')中的counterFn(el, delay)调用它时给了它一个值。
However in the scope of getTime , you did not provide el with a value. 但是，在getTime范围内，没有为el提供值。 So el becomes undefined . 所以el变得undefined 。
Another problem with the code is the incorrect usage of innerHTML . 代码的另一个问题是innerHTML使用不正确。
Just removing the parameter from function getTime(el){... to function getTime(){... will do. 只需将参数从function getTime(el){...删除到function getTime(el){...即可function getTime(){... 。
As for innerHTML , it is not a function. 至于innerHTML ，它不是一个函数。 So it can't be called like innerHTML(counter) . 因此不能像innerHTML(counter)那样调用它。
The correct way is to directly assign a value to it like 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>
解决方案2
0 2017-07-28 19:16:11
One potential issue here is that your trying to get the canvas before it exist in the DOM, you will want to wrap your code in a window.onload event to prevent that from happening. 这里一个潜在的问题是，您试图在画布在DOM中存在之前获取它，您将希望将代码包装在window.onload事件中，以防止发生这种情况。
Next for the code bellow here: 下面是下面的代码：
setInterval(getTime, delay);
You define getTime as expecting a parameter but did not pass one, instead you will want do to: 您将getTime定义为期望参数，但未传递参数，而是需要执行以下操作：
setInterval(function(){ getTime(el); }, wait);
Finally el.innerHTML(counter); 最后是el.innerHTML(counter); should be el.innerHTML = counter; 应该是el.innerHTML = counter; . 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.