OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Website error saying "object can not be found" but both paths are the same

  • Thread starter Thread starter Riley Simpson
  • Start date Start date
R

Riley Simpson

Guest
I'm currently building a website and I have come across what should be an easy fix, but I cannot seem to pinpoint the error. When I navigate to certain aspects of my page, and I click on "register", it takes me the page I have set up for it. But from other aspects of my page (and I click the same exact button), it does not work and takes me to the "object can not be found" aspect of my website. Any ideas or even ways to test where the error is coming from? This all stems from the "accountMenu.js" file I have.

This is the same exact JS code on each page (about.html (works here) and index.html):

Code:
var accountMenuLoggedOut = document.createElement('div');
            accountMenuLoggedOut.id = 'accountMenuLoggedOut';
            accountMenuLoggedOut.className = 'account-menu';
            accountMenuLoggedOut.style.display = 'none';
            accountMenuLoggedOut.innerHTML = `
                <ul>
                    <li><a href="login.php">Login</a></li>
                    <li><a href="register.php">Register</a></li>
                    <li><a href="forgot-password.html">Forgot Password</a></li>
                </ul>
            `;

This is my accountMenu.js file:

Code:
// Check login status
function isLoggedIn() {
    return localStorage.getItem('loggedIn') === 'true';
}

// Check admin status
function isAdmin() {
    return localStorage.getItem('isAdmin') === 'true';
}

// Inject the dropdown menus into the page
function injectAccountMenus() {
    console.log("Injecting account menus");

    var accountMenuLoggedIn = document.createElement('div');
    accountMenuLoggedIn.id = 'accountMenuLoggedIn';
    accountMenuLoggedIn.className = 'account-menu';
    accountMenuLoggedIn.style.display = 'none';
    accountMenuLoggedIn.innerHTML = `
        <ul>
            <li><a href="profile.html">Profile</a></li>
            ${!isAdmin() ? '<li><a href="reservationStatus.html">Status</a></li>' : ''}
            ${isAdmin() ? '<li><a href="adminRequests.html">Requests</a></li>' : ''}
            <li><a href="#" id="logoutButton">Logout</a></li>
        </ul>
    `;
    console.log("Created logged-in menu", accountMenuLoggedIn);

    var accountMenuLoggedOut = document.createElement('div');
    accountMenuLoggedOut.id = 'accountMenuLoggedOut';
    accountMenuLoggedOut.className = 'account-menu';
    accountMenuLoggedOut.style.display = 'none';
    accountMenuLoggedOut.innerHTML = `
        <ul>
            <li><a href="../pages/login.php">Login</a></li>
            <li><a href="../pages/register.php">Register</a></li>
            <li><a href="pages/forgot-password.html">Forgot Password</a></li>
        </ul>
    `;
    console.log("Created logged-out menu", accountMenuLoggedOut);

    document.body.appendChild(accountMenuLoggedIn);
    document.body.appendChild(accountMenuLoggedOut);

    updateAccountButton();
}

// Update account button
function updateAccountButton() {
    console.log("Updating account button");

    var accountButton = document.getElementById('accountButton');
    var accountMenuLoggedIn = document.getElementById('accountMenuLoggedIn');
    var accountMenuLoggedOut = document.getElementById('accountMenuLoggedOut');

    if (!accountButton) {
        console.error("Account button not found!");
        return;
    }

    // Clear previous event listeners
    var newAccountButton = accountButton.cloneNode(true);
    accountButton.parentNode.replaceChild(newAccountButton, accountButton);
    accountButton = newAccountButton;

    console.log("Cleared previous event listeners from account button");

    if (isLoggedIn()) {
        console.log("User is logged in");
        accountButton.innerText = 'Account';
        accountButton.href = '#';
        accountButton.addEventListener('click', function(event) {
            event.preventDefault();
            toggleAccountMenu(accountMenuLoggedIn);
        });

        const logoutButton = document.getElementById('logoutButton');
        if (logoutButton) {
            logoutButton.addEventListener('click', function(event) {
                event.preventDefault();
                console.log("Logging out");
                localStorage.removeItem('loggedIn');
                localStorage.removeItem('isAdmin');
                window.location.reload();
            });
        } else {
            console.error("Logout button not found!");
        }
    } else {
        console.log("User is not logged in");
        accountButton.innerText = 'Account';
        accountButton.href = '#';
        accountButton.addEventListener('click', function(event) {
            event.preventDefault();
            toggleAccountMenu(accountMenuLoggedOut);
        });
    }
}

// Toggle account menu
function toggleAccountMenu(menu) {
    console.log("Toggling account menu", menu);

    var menus = document.querySelectorAll('.account-menu');
    menus.forEach(function(m) {
        if (m !== menu) {
            m.style.display = 'none';
        }
    });

    menu.style.display = (menu.style.display === 'block') ? 'none' : 'block';

    // Close the menu if clicked outside
    document.addEventListener('click', function(event) {
        if (!menu.contains(event.target) && event.target.id !== 'accountButton') {
            menu.style.display = 'none';
        }
    }, { once: true });
}

function logoutUser() {
    localStorage.removeItem('loggedIn');
    localStorage.removeItem('isAdmin');
    window.location.href = 'index.html';
}

// Call the function to inject the menus after the DOM is fully loaded
document.addEventListener('DOMContentLoaded', injectAccountMenus);

<p>I'm currently building a website and I have come across what should be an easy fix, but I cannot seem to pinpoint the error. When I navigate to certain aspects of my page, and I click on "register", it takes me the page I have set up for it. But from other aspects of my page (and I click the same exact button), it does not work and takes me to the "object can not be found" aspect of my website. Any ideas or even ways to test where the error is coming from? This all stems from the "accountMenu.js" file I have.</p>
<p>This is the same exact JS code on each page (about.html (works here) and index.html):</p>
<pre><code>var accountMenuLoggedOut = document.createElement('div');
accountMenuLoggedOut.id = 'accountMenuLoggedOut';
accountMenuLoggedOut.className = 'account-menu';
accountMenuLoggedOut.style.display = 'none';
accountMenuLoggedOut.innerHTML = `
<ul>
<li><a href="login.php">Login</a></li>
<li><a href="register.php">Register</a></li>
<li><a href="forgot-password.html">Forgot Password</a></li>
</ul>
`;
</code></pre>
<p>This is my accountMenu.js file:</p>
<pre><code>// Check login status
function isLoggedIn() {
return localStorage.getItem('loggedIn') === 'true';
}

// Check admin status
function isAdmin() {
return localStorage.getItem('isAdmin') === 'true';
}

// Inject the dropdown menus into the page
function injectAccountMenus() {
console.log("Injecting account menus");

var accountMenuLoggedIn = document.createElement('div');
accountMenuLoggedIn.id = 'accountMenuLoggedIn';
accountMenuLoggedIn.className = 'account-menu';
accountMenuLoggedIn.style.display = 'none';
accountMenuLoggedIn.innerHTML = `
<ul>
<li><a href="profile.html">Profile</a></li>
${!isAdmin() ? '<li><a href="reservationStatus.html">Status</a></li>' : ''}
${isAdmin() ? '<li><a href="adminRequests.html">Requests</a></li>' : ''}
<li><a href="#" id="logoutButton">Logout</a></li>
</ul>
`;
console.log("Created logged-in menu", accountMenuLoggedIn);

var accountMenuLoggedOut = document.createElement('div');
accountMenuLoggedOut.id = 'accountMenuLoggedOut';
accountMenuLoggedOut.className = 'account-menu';
accountMenuLoggedOut.style.display = 'none';
accountMenuLoggedOut.innerHTML = `
<ul>
<li><a href="../pages/login.php">Login</a></li>
<li><a href="../pages/register.php">Register</a></li>
<li><a href="pages/forgot-password.html">Forgot Password</a></li>
</ul>
`;
console.log("Created logged-out menu", accountMenuLoggedOut);

document.body.appendChild(accountMenuLoggedIn);
document.body.appendChild(accountMenuLoggedOut);

updateAccountButton();
}

// Update account button
function updateAccountButton() {
console.log("Updating account button");

var accountButton = document.getElementById('accountButton');
var accountMenuLoggedIn = document.getElementById('accountMenuLoggedIn');
var accountMenuLoggedOut = document.getElementById('accountMenuLoggedOut');

if (!accountButton) {
console.error("Account button not found!");
return;
}

// Clear previous event listeners
var newAccountButton = accountButton.cloneNode(true);
accountButton.parentNode.replaceChild(newAccountButton, accountButton);
accountButton = newAccountButton;

console.log("Cleared previous event listeners from account button");

if (isLoggedIn()) {
console.log("User is logged in");
accountButton.innerText = 'Account';
accountButton.href = '#';
accountButton.addEventListener('click', function(event) {
event.preventDefault();
toggleAccountMenu(accountMenuLoggedIn);
});

const logoutButton = document.getElementById('logoutButton');
if (logoutButton) {
logoutButton.addEventListener('click', function(event) {
event.preventDefault();
console.log("Logging out");
localStorage.removeItem('loggedIn');
localStorage.removeItem('isAdmin');
window.location.reload();
});
} else {
console.error("Logout button not found!");
}
} else {
console.log("User is not logged in");
accountButton.innerText = 'Account';
accountButton.href = '#';
accountButton.addEventListener('click', function(event) {
event.preventDefault();
toggleAccountMenu(accountMenuLoggedOut);
});
}
}

// Toggle account menu
function toggleAccountMenu(menu) {
console.log("Toggling account menu", menu);

var menus = document.querySelectorAll('.account-menu');
menus.forEach(function(m) {
if (m !== menu) {
m.style.display = 'none';
}
});

menu.style.display = (menu.style.display === 'block') ? 'none' : 'block';

// Close the menu if clicked outside
document.addEventListener('click', function(event) {
if (!menu.contains(event.target) && event.target.id !== 'accountButton') {
menu.style.display = 'none';
}
}, { once: true });
}

function logoutUser() {
localStorage.removeItem('loggedIn');
localStorage.removeItem('isAdmin');
window.location.href = 'index.html';
}

// Call the function to inject the menus after the DOM is fully loaded
document.addEventListener('DOMContentLoaded', injectAccountMenus);
</code></pre>
 

Latest posts

B
Replies
0
Views
1
Blundering Ecologist
B
Top