Using "Return" Key to Instigate Search is Clearing Results

I would like to trigger the search on an Input in two ways:

1. By clicking the “Search” button: This calls the function from html by way of onclick=“searchAPI()” and it works fine.
2. By clicking the “Return” Key in the Input: I have tried two ways to do this. While neither work properly, both seem to give the same result . The methods:

a. By adding onsearch=“searchAPI()” in the html
b. In Javascript by adding an eventListener and “keyup”

I added console.log tests to ensure the function is being called and something odd is happening. Not only are no results being returned, but the console log only works sometimes, and when it does it prints for only a brief second before the Console is completely cleared.

I’d like to understand what I am doing wrong that causes the console to clear, and whether this issue is preventing results from being returned. Thank you.

Here is my
HTML

<div class="text-center"> 
    <a id="search_button" onclick="searchAPI()" class="btn button-image mybutton 
    inner_element_245"></a>
</div>

JS

var input = document.getElementById("search_widget_input");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
      console.log("Yellow");
   event.preventDefault();
   document.getElementById("search_button").click();
  }
});

async function searchAPI() {
    let searchTerm = document.getElementById('search_widget_input').value;
    console.log(searchTerm);
    await searchIngredients(searchTerm);
    await searchPortions(searchTerm);
}

There is a native HTML element that has all the necessary functionality baked in - <form>. Just wrap <input> inside <form> and handle form submit, not “keyup” on input.

Thanks @jenovs I’ve no idea why, but my code started working.