Stuck trying to get list item to appear upon click of button

Trying to have “li” appear every time I click the add button. My function is set to have an addEventListener but the function isn’t working.

Here is my JS:

document.querySelector('#submit-btn').addEventListener('click', addATodoItem)



function addATodoItem (){

    //contains value of input
    let formInput = document.querySelector('#myInput').value;
   //selects the unordered list
    const list = document.querySelector("#myUL");
    //puts in the value of input in a new li in the selected unordered list
    list.innerHTML += `<li><a href="#"${formInput}</li>`;
}

I double checked my code and even saw the HTML to see if anything has changed, but I can’t even get the function to console.log when I click it so I feel like there is something broken to the function being called.

I am expecting that when I click the ‘add’ button, the value will appear as a new HTML <li>

Here is my HTML too:

<section id="myHeader" class="header">
    <h2>My To Do List</h2>
    <input type="text" id="myInput" placeholder="Add to do...">
    <input id="submit-btn" type="submit" value="Add">
</section>
<section>
    <ul id="myUL">
        <li></li>
    </ul>
</section>