take an error when i want to trigger click event out of an element in grid

I used this following codes before to detect to click out of an element:

let ignoreClickOnMeElement = document.getElementById('userNameTd');
document.addEventListener('click', function(event) {
    let isClickInsideElement = ignoreClickOnMeElement.contains(event.target);
    if (!isClickInsideElement) {
        document.getElementById("profileMenu").style.display="none";
        document.getElementById("profileMenuContent").style.display="none";
    }
});

and it was working correctly. but now i change my site structure to grid and above codes don’t work. and when i click out of element i take the following error:

header.js:71 Uncaught TypeError: Cannot read properties of null (reading ‘contains’)

this is my html codes (the header tag have grid display):

<header class="header">
        <div class="gradiantBar"></div>
<div class="onlineUser">
    <table border="0px" >
        <tr>
            <td class="userImageContainer" colspan="2">
                <img class="userImage" src="icons/user_icon.png"/>
            </td>
        </tr>
        <tr>
            <td id="userNameTd" onclick="showProfileMenu();" >
                <label class="userNameContainer">
                    <img src="icons/downDropDown_icon.png">                          
                </label>
                <input type="hidden" id="hiddenUserType" value=""/>                    
            </td>
        </tr>
    </table>
    <!-- ---------- drop down menu ---------- -->
    <div class="dropdown" id="profileMenu" on="hideProfileMenu();">
        <div class="dropdown-content" id="profileMenuContent">
            <a href="#" onclick="showUserProfile('<?php echo $_SESSION["typeSession"] ;?>','<?php echo $_SESSION["userIDSession"] ;?>');">
                <img src="../icons/profile_icon.png"/>show profile
            </a>
            <a href="#" onclick="changePassword('<?php echo $_SESSION["userIDSession"] ;?>')">
                <img src="../icons/password_icon.png"/>change password
            </a>
            <a href="#" onclick="logout()"><img src="../icons/logout_icon.png"/>logout</a>
        </div>
    </div>
    <!-- -------------------------------------- -->
</div>
<div class="logo"></div>
<div class="timeContainer">
    <table border="0px">
        <tr>
            <td><img src="icons/calendar_icon.png"/></td>
            <td id="nowWeekDayContainer"></td>
            <td id="nowDateContainer"></td>
        </tr>
        <tr>
            <td><img src="icons/clock_icon.png"/></td>
            <td colspan="2" id="nowTimeContainer"></td>
        </tr>
    </table>
</div><!-- timeContainer -->
</header> <!-- set header class to use it in multi place-- -->