'Cannot set property "innerHTML" of undefined' - 但它被定义

Question

奇怪的问题，在JS元素对象上使用".innerHTML"时，我看到错误"无法设置未定义的属性"innerHTML"，但它不是未定义的，因为我可以在前面的行中使用console.log(myElement(将其打印到控制台。使用Chrome和Firefox时会出现此错误。

此外，"myElement.innerHTML("text"("即使在此错误的情况下也能正常工作，所以我的代码正在工作(功能上(，但我想知道它是否会产生一些不可预见的问题，或者这是否只是一个错误。

创建问题/错误的代码是：

var errorList = event.target.getElementsByClassName("errorList")[0];
  console.log(errorList);    // successfully displays my intended element
  errorList.innerHTML = "";  // successfully clears the <ul class='errorList'>

Answer 1

即使使用事件，在调用 getElementClassByName 时也切换到 document 。 event.target并不总是您所相信的，请尝试记录它以捕获问题。

工作示例

document.getElementsByClassName("errorList")[0].addEventListener("click",
function(event){
var errorList = document.getElementsByClassName("errorList")[0];
  console.log(errorList);    // successfully displays my intended element
  errorList.innerHTML = "";  })

<ul class="errorList">
  <li>test</li>
</ul>

事件示例(在日志上返回未定义(

document.getElementsByClassName("errorList")[0].addEventListener("click",
function(event){
var errorList = event.getElementsByClassName("errorList")[0];
  console.log(errorList);    // successfully displays my intended element
  errorList.innerHTML = "";  })

<ul class="errorList">
  <li>test</li>
</ul>

Answer 2

您的代码可能多次运行，可能在启动或页面加载时运行。 如果发生这种情况，并且在它运行的某个时间，"errorList"元素不存在，则可能会在那个时候抛出错误 - 即使它稍后成功运行。

为了检查这一点，我建议添加类似的东西

console.log("TEST!");

在

var errorList = event.target.getElementsByClassName("errorList")[0];

如果"TEST！"在控制台中多次显示，您将知道它正在运行多次。

Answer 3

你需要添加加载事件，以便在 DOM 准备就绪时获取元素。

function init(){
 var el = document.getElementById("btn");
 el.addEventListener('click',function(){ alert("Button clicked"); });
}
addEventListener('load',init);

<button id="btn">Click</button>