JS 问题追加/删除孩子（Node.removeChild 的参数 1 不是对象）

Question

我正在尝试创建一个小型益智游戏。单击图像时，我希望出现一个叠加层，该叠加层应该显示视频（为玩家提供提示）或在叠加层内创建一个带有输入的 div（输入密码，如果输入正确，则应解锁新选项/视频）。当显示/隐藏覆盖 div 时，第 17、29和 86 行出现“ TypeError: Argument 1 of Node.removeChild is not an object. ”。系统：Windows 10 64bit/Windows 8 32 Bit 运行 Firefox(67.0.4)。它只会在一两台使用现代 Firefox 版本的设备上运行。在尝试添加/删除之前，我尝试重新获取覆盖元素（通过 document.getElementById）。并且我试图删除的对象应该通过具有 typeof 的 if 语句进行检查。创建覆盖层有效，我只是在尝试关闭它时遇到错误。我已经连续 12 小时尝试了不同的方法，经过漫长炎热的一天后，我决定在大约 4 小时前重新设计它。如果我忽略了什么，请善待^^这是更有趣的部分。//Variablesvar overlay = document.getElementById("overlay");//removes Overlay by adding "hidden" class.function removeOverlay() {  if (typeof(document.getElementById("curVid")) !== 'undefined') {    overlay.removeChild(document.getElementById("curVid"));  }  if (typeof(document.getElementById("pwDiv")) !== 'undefined') {    overlay.removeChild(document.getElementById("pwDiv"));  }  overlay.classList.add("hidden");}//shows overlay by removing "hidden" class. adds listener for clicks to remove Overlay.function showOverlay() {  overlay.classList.remove("hidden");  overlay.addEventListener('click', function() {    removeOverlay();  });}//Play Video: receives int for video source. Creates a new Video with all its settings, //adds it to the overlay and calls showOverlay function.function playVideo(id) {  var vid = document.createElement('video');  vid.src = getVideo(id);  vid.id = "curVid";  vid.autoplay = true;  vid.controls = true;  vid.onended = function() {    overlay.removeChild(vid);    removeOverlay();  };  overlay.appendChild(vid);  showOverlay();}function createPWPromt(password) {  console.log(password);  var newsDiv = document.getElementById("news");  var pwDiv = document.createElement('div');  pwDiv.id = "pwDiv";  overlay.appendChild(pwDiv);  var pwInput = document.createElement('input');  pwInput.id = "pwInput";  pwDiv.appendChild(pwInput);