网站点击Register按钮部分页面报'object can not be found'问题求助

开发网站时碰到一个奇怪的问题：部分页面点击「Register」按钮能正常跳转到注册页，但在其他页面点击相同按钮，会跳转到「object can not be found」错误页。问题出在accountMenu.js文件里，下面是相关页面代码和完整的accountMenu.js代码，求排查思路或测试方法。

页面中重复的JS代码（about.html正常，index.html异常） #

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>
`;

accountMenu.js完整代码 #

// 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);

排查思路与测试方法 #

1. 检查相对路径一致性 #

问题核心大概率是相对路径不匹配：

• 页面内代码用的是register.php（相对当前目录），但accountMenu.js里用的是../pages/register.php（相对上级目录）。当页面所在目录不同时，两个路径指向的位置完全不同：比如index.html在根目录时，../pages/register.php会指向根目录外的文件夹，自然找不到；而about.html如果在pages目录里，该路径才会正确指向目标文件。
• 测试方法：右键点击异常页面的「Register」按钮，选择「复制链接地址」，对比正常页面的链接地址，验证路径是否正确。

2. 确认实际生效的菜单来源 #

页面内和accountMenu.js都创建了#accountMenuLoggedOut元素，可能存在元素覆盖：

• 打开浏览器开发者工具的Elements面板，查看#accountMenuLoggedOut的innerHTML，判断当前显示的菜单是页面内代码创建的，还是accountMenu.js创建的。
• 测试方法：在浏览器控制台执行document.getElementById('accountMenuLoggedOut').innerHTML，通过输出的链接路径判断生效的代码逻辑。

3. 统一路径策略 #

推荐使用根相对路径（以/开头），不管页面在哪个目录，都能指向正确位置：

• 比如把accountMenu.js里的链接改成/pages/register.php，页面内的代码也同步修改为相同的根相对路径。
• 测试方法：修改路径后，在不同目录的页面点击按钮，验证跳转是否正常。

4. 排查元素重复创建的冲突 #

页面内和accountMenu.js重复创建同名元素，可能导致DOM中存在多个#accountMenuLoggedOut，点击时触发了错误的元素：

• 用开发者工具Elements面板搜索accountMenuLoggedOut，查看是否有多个同名元素存在。
• 测试方法：删除页面内重复的菜单创建代码，只保留accountMenu.js的逻辑，再测试跳转是否正常。

内容的提问来源于stack exchange，提问作者Riley Simpson