Why does the removeChild property not work?

Question

On line 14 (where the problem starts), the error says it cannot read removeChild property of null. Why is that? Where have I gone wrong? This has been driving me crazy for days. Thank you.
https://code.sololearn.com/Wj08FS8TYDSe/?ref=app

Answer 1

Your 'body' variable is equal to null, because the JS tab is injected in the head of the HTML page prior to the body. So the element doesn't exist in the DOM as of yet. You have the 'type()' function set to window.onload, but what you need to do is wrap all your JS in an onload function leaving password, show(), and enter() outside the onload function, then just call 'type()' at the bottom.

window.onload = function() {
var body = document.getElementById("container");
var view = document.getElementById("pop");
var complete = document.getElementById("run");

function type() {
console.log(password);

if (password.length < 8) {
alert("That password is too short, restart the program to try again");
body.removeChild(view);
body.removeChild(complete);
}
else if (password.length > 8) {
alert("That password is too long, restart the program to try again");
body.removeChild(view);
body.removeChild(complete);

}
else if (password.length === 8) {
alert("Your password was accepted");
}
}
type();
};

var password = prompt("Enter what you want your password to be (8 characters)");

function show() {
alert("Your password is " + password);
}

function enter() {
var authenticate = prompt("Please enter your password");
if (authenticate === password) {
alert("Welcome to your page");
document.write("YOU MADE IT!!!");
}
else {
alert('That password is incorrect, please press the "Enter Password" button again to retry');
}

}