Javascript："Cannot read property 'addEventListener' of null" 尝试删除子项时出错

Question

对 javascript 很陌生。我正在建立一个非常简单的网站来展示某人的投资组合。在 HTML 中，我有一个 ID 为 'chocolate-link' 的 link。当我单击 link 时，addVideo 函数按预期运行。

我在使用 dismissVideo 函数时遇到问题。我希望能够单击视频变量中的 "close X" link 以删除 elChocolate 变量。当页面加载时，我在控制台中收到 "Cannot read property 'addEventListener' of null" 错误。感谢任何帮助。

这是javascript：

var video = '<div class=\"header\"><a id=\"close\" href="#">close X</a></div>';
video += '<iframe class="chocolate" src="[link here]" width="700" height="396" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';

var elChocolate = document.createElement('div');
elChocolate.setAttribute('id', 'video');
elChocolate.innerHTML = video;

function addVideo() {
  document.body.appendChild(elChocolate);
  elAdd.className = "active";
}

var elAdd = document.getElementById('chocolate-link');
elAdd.addEventListener('click', addVideo, false);

function dismissVideo() {
  document.body.removeChild(elChocolate);
}

var elClose = document.getElementById('close');
elClose.addEventListener('click', dismissVideo, false);

Answer 1

您的代码仅在单击 chocolate-link 时将 close 元素添加到 DOM，但您试图立即操作 close（在任何人单击之前） link 添加它）所以它失败了。您可能希望在 close 单击处理程序添加到 DOM 后立即添加它。我建议将它添加到 addVideo 函数的底部。

此代码将点击处理程序附加到 addVideo 函数，但 addVideo 在 link 被点击之前不会被调用：

var elAdd = document.getElementById('chocolate-link');
elAdd.addEventListener('click', addVideo, false);

紧接着，您调用此代码：

var elClose = document.getElementById('close');
elClose.addEventListener('click', dismissVideo, false);

该代码将函数附加到尚未创建的 'close' 按钮。您可能希望在调用 addVideo 函数时附加该函数。

Javascript："Cannot read property 'addEventListener' of null" 尝试删除子项时出错

Javascript: "Cannot read property 'addEventListener' of null" error when trying to remove child

javascript

event-listener

removechild