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 小时前重新设计它。如果我忽略了什么，请善待^^

这是更有趣的部分。

//Variables

var 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);