Question

非常新的javascript。我正在建立一个非常简单的网站来展示某人的投资组合。在HTML中，我有一个ID＆＃39; chocolate-link＆＃39;的链接。单击链接时，addVideo函数按预期运行。

我在使用dismissVideo功能时遇到了问题。我希望能够点击＆＃34;关闭X＆＃34;链接视频变量以删除elChocolate变量。当页面加载时，我得到一个＆＃34;无法读取属性＆＃39; addEventListener＆＃39; of null＆＃34;控制台中出错。任何帮助表示赞赏。

这是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

您的代码只是在点击close时将chocolate-link元素添加到DOM，但您尝试立即操作close（在任何人点击链接添加之前）所以它失败了。您可能希望在将close点击处理程序添加到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函数时附加该函数。

Javascript：“尝试删除子项时无法读取属性'addEventListener'的null”错误

1 个答案: