onClick事件调用函数，但没有触发

Question

Okay, so I'm getting a weird problem with my onClick elements.

I'm using PHP to echo some code, and here it is:

<div class = \"dropdown\">
        <i id = \"elipses_$id\" onClick = \"dropDown_$id()\" style = \"color:#777\" class=\"fas fa-ellipsis-v\"></i>
        <div id = \"dropdown_$id\" class = \"dropdown-content\">    
                [html code here isn't relevant]
        </div>
</div>

When I open inspect element, and I click the button, it outputs the function name:

And when I type the function name into the console, the dropdown opens like it should. So why doesn't it do it when I click?

Not sure if it is needed, but here is the script I am using to open/close the dropdown.

function dropDown_$id() {
        document.getElementById(\"dropdown_$id\").classList.toggle(\"show\");
}
window.onclick = function(event) {
        console.log(event.target);
        if (!event.target.matches('#dropdown_$id') && !event.target.matches('#elipses_$id')) {
                var dropdown = document.getElementById(\"#dropdowm_$id\");
                var c;
                if(dropdown != null){
                        for (c = 0; c < dropdown.length; c++) {
                                var openDropdowns = dropdown[c];
                                if (openDropdowns.classList.contains('show')) {
                                        openDropdowns.classList.remove('show');
                                }
                        }
                }
        }
}

EDIT: This is the raw HTML of the dropdown that is spat out after PHP is run:

<div id="dropdown_26" class="dropdown-content"> 
        <div id="names" style="border-bottom: thin solid #BDBDBD;">
                <h2 class="dropdown-contenth2">Francois&nbsp;van&nbsp;Kempen</h2>
                <p style="color:grey;margin-top:-20px; margin-left: 16px;">@Bork_Bork</p>
        </div>
        div id="settings" style="border-bottom: thin solid #BDBDBD;">
                <a id="a1" class="dropdown-contenta" href="settings.php">Accout Settings</a>
                <form id="dark_mode_form" action="nightmode.php" method="POST" style="padding: 10px; display:flex;justify-content:flex-start;align-content:center">
                        <label style="" class="switch">
                                <input onchange="this.form.submit()" type="checkbox" name="darkmode" value="checked">
                                <span class="slider round"></span>
                        </label>
                        <p class="dropdown-contentp" style="margin:0;padding:0; margin-left:5px;margin-top:5px;">Night mode</p>
                </form>
        </div>

        <a id="a2" class="dropdown-contenta" href="logout.php">Log out @Bork_Bork</a>
        <a id="a3" class="dropdown-contenta" href="reset-password.php">Reset password @Bork_Bork</a>

</div>

EDIT 2: Added the raw script:

<script id="dropdown-settings" type="text/javascript">

    function dropDown() {
        document.getElementById("dropdown").classList.toggle("show");
    }

    function dropDown_26() {
        document.getElementById("dropdown_26").classList.toggle("show");
    }

//   Close the dropdown menu if the user clicks outside of it
    window.onclick = function(event) {
        console.log(event.target);
        if (!event.target.closest('#dropdown') && !event.target.closest('#navPFP')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
        if (!event.target.matches('#dropdown_26') && !event.target.matches('#elipses_26')) {
            var dropdown = document.getElementById("#dropdowm_26");
            var c;
            if(dropdown != null){
                for (c = 0; c < dropdown.length; c++) {
                    var openDropdowns = dropdown[c];
                    if (openDropdowns.classList.contains('show')) {
                        openDropdowns.classList.remove('show');
                    }
                }
            }
        }
    }
</script>