I'm in the process of building a dynamic menu that changes based on whether a user is logged in on a webpage. Check out the HTML code I've used (Bootstrap 4):
<div class="dropdown" id="account_info">
<button type="button" class="btn btn-elegant" id="dropdownMenuButton" data-toggle="dropdown"><i class="icon-user-circle"></i> User</button>
<div class="dropdown-menu" id="drop_down">
</div>
</div>
Here is the code to display a "Login" link or remove it if the user is already 'signed in':
var _status = vitals.dataset.user; //getting 'cookie' information...
var _log_status = sessionStorage.getItem("logged");
if (_status != "none") {
if ((_log_status === null) || (_log_status === "undefined")) {
elem = document.getElementById("account_in");
elem.parentNode.removeChild(elem); //removing 'login' item
sessionStorage.setItem("logged", "login");
} //user has 'signed in' for the first time...
} else {
elem_set = document.createElement("a");
elem_set.className = "drop-down-item";
elem_set.id = "account_in";
elem_set.appendChild(document.createTextNode("Login"));
document.getElementById("drop_down").appendChild(elem_set);
} //checking if the 'user' cookie has passed...or not...
When the user is not 'signed in', the code for displaying the "Login" link in the dropdown menu functions correctly (in the 'else' statement). However, an error occurs when the user is 'signed in'. The error message is "Uncaught TypeError: Cannot read property 'parentNode' of null" in the line that attempts to remove the element with the id of "account_in".
I'm confused as to why the id "account_in" is being reported as 'null', since I create that element attribute...or could this error be related to something else? Any guidance would be greatly appreciated.