Question

我正在尝试创建一个小型益智游戏。单击图像时，我希望出现一个覆盖物，该图像应显示视频（给玩家提示）或在覆盖物中创建带有输入的div（以输入应解锁新选项的密码） / videos（如果输入正确）。

在显示/隐藏叠加层div时，在第17、29和86行出现“ TypeError：Node.removeChild的参数1不是对象。”。

系统：运行Firefox（67.0.4）的Windows 10 64位/ Windows 8 32位。它只能在使用现代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);

  var pwButton = document.createElement('button');
  pwButton.id = "pwButton";
  pwButton.innerHTML = "senden";
  pwButton.addEventListener('click', function() {
    if (pwInput.value.toLowerCase() == password) {
      var p = document.createElement('p');
      p.innerHTML = "hello world the password was correct!";
      newsDiv.appendChild('p');
      removeOverlay();
    } else {
      var p = document.createElement('p');
      p.innerHTML = "sorry the password was incorrect!";
      newsDiv.appendChild('p');
      removeOverlay();
    }
  });
  pwDiv.appendChild(pwButton);

  showOverlay();
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Rework</title>
  <link rel="stylesheet" type="text/css" href="video.css">

  <style>

  </style>
</head>

<body>
  <div id="news">
    <ul>
      <li>
        <p onclick="showOverlay()">Show Overlay!</p>
      </li>
      <li>
        <p onclick="playVideo(4)">Play Video 4!</p>
      </li>
      <li>
        <p onclick="createPWPromt('nudel')">create PW Promt!</p>
      </li>
    </ul>
  </div>
  <div id="youtuber">

  </div>
  <div id="overlay" class="hidden">

  </div>
  <script type="text/javascript" src="video.js"></script>
</body>

</html>

我的Divs都使用float：left;格式化；其中2表示内容的宽度为50％，而第3表示绝对的宽度和高度为100％。它具有一个.hidden类（用于display：none），可通过js添加和删除该类以切换可见性。

Answer 1

如果在添加removeOverlay()和curVid元素之前调用pwDiv，则会出现此错误。您的元素是否已经存在测试不正确。您测试document.getElementById()是否返回undefined，但是在找不到该元素时返回null。

function removeOverlay() {
  var curVid = document.getElementById("curVid");
  if (curVid) {
    overlay.removeChild(curVid);
  }
  var pwDiv = document.getElementById("pwDiv");
  if (pwDiv) {
    overlay.removeChild(pwDiv);
  }
  overlay.classList.add("hidden");
}

JS发出附加/删除子项的问题（Node.removeChild的参数1不是对象）

1 个答案: