Javascript:"；无法读取属性'；增补列表器'；“无效”的定义；尝试删除子项时出错

对javascript来说非常陌生。我正在建立一个非常简单的网站来展示某人的投资组合。在HTML中，我有一个ID为“巧克力链接”的链接。当我点击链接时，addVideo功能按预期运行

我的视频功能有问题。我希望能够单击视频变量中的“close X”链接以删除该变量。当页面加载时，控制台中出现“无法读取属性'addEventListener'为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);

var视频=”；
视频+=''；
var=document.createElement（'div'）；
setAttribute（'id'，'video'）；
elChocolate.innerHTML=视频；
函数addVideo（）{
文件.body.appendChild（elChocolate）；
elAdd.className=“活动”；
}
var elAdd=document.getElementById（'chocolate-link'）；
elAdd.addEventListener（'click'，addVideo，false）；
函数dismissVideo（）{
文件.body.removeChild（elChocolate）；
}
var elClose=document.getElementById（'close'）；
elClose.addEventListener（'click'，dismissVideo，false）；

您的代码只是在单击

巧克力链接时才将
close
元素添加到DOM中，但是您试图立即操作
close
（在任何人单击链接添加它之前），所以它失败了。您可能希望在将
close
click处理程序添加到DOM后立即添加它。我建议将其添加到
addVideo
函数的底部

此代码正在将单击处理程序附加到
addVideo
函数，但在单击链接之前不会调用
addVideo
：

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

之后，立即调用此代码：

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

该代码将函数附加到尚未创建的“关闭”按钮。当调用
addVideo
函数时，您可能希望附加该函数。
这意味着您试图
addEventListener
的内容为空。这就成功了。我将elCose变量移动到addVideo函数中，并在dismissVideo函数中添加了一行以清除link类。谢谢