JS gibt Probleme beim Anhängen/ Entfernen von Kinden (Argument 1 des Knotens.Removechild ist kein Objekt) ⇐ HTML

[Anonymous]

Ich versuche, ein kleines Puzzlespiel zu erstellen. Wenn Sie auf ein Bild klicken, möchte ich, dass ein Overlay angezeigt wird, das entweder ein Video anzeigen sollte (um Spielern Hinweise zu geben) oder ein Div im Overlay mit einem Eingang zu erstellen (um ein Passwort einzugeben, das neue Optionen/Videos entsperren sollte, wenn richtig eingegeben wird). Objekt. "in den Zeilen 17, 29 und 86 wird angezeigt. Es wird immer nur auf ein oder zwei Geräten mit einer modernen Firefox-Version ausgeführt. Und die Objekte, die ich entfernen möchte, sollten überprüft werden, ob Aussagen mit Typen von Typen. Bitte seien Sie freundlich, wenn ich etwas übersehen habe ^^ < /p>

Hier sind die interessanteren Teile.//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();
}< /code>





Rework
[*]

• Show Overlay!
• Play Video 4!
• create PW Promt!

< /code>
< /div>
< /div>
< /p>

Meine Divs sind alle mit Float formatiert: links; Mit dem 2 für den Inhalt von 50% Breite, während der dritte bei 100% Breite und Höhe absolut positioniert ist. Es verfügt über eine. HIDDDENE -Klasse (für Display: keine), die hinzugefügt und durch JS entfernt wird, um die Sichtbarkeit zu umschalten.