Javascript Function only works in Console

Question

I have a function which works fine and returns the data that I need, but for some reason I can only get this function to work when I call it from the developer console. When I try to trigger the script with event listeners it just refreshes the page. Please let me know what I am doing wrong here.

function fetchData(searchTerm) {
  fetch(`https://us.api.blizzard.com/data/wow/search/item?namespace=static-us&locale=en_US&name.en_US=${searchTerm}&orderby=id&_page=1&str=&access_token=USViCNOdIK4aqbJ1XwtWyWH4APp1jnLJCl`)
    .then(response => {
      if (!response.ok) {
        throw Error("ERROR");
      }
      return response.json();
    })
    .then(data => {
      const stats = document.getElementById('weaponArmourResults');

      Promise.all(data.results.map(user => {
          return fetch(`https://us.api.blizzard.com/data/wow/media/item/${user.data.id}?namespace=static-us&locale=en_US&access_token=USViCNOdIK4aqbJ1XwtWyWH4APp1jnLJCl`, )
            .then(innerRes => innerRes.json())
            .then(innerResData => {
              return { ...user,
                ...innerResData
              }
            })
            .catch(() => {
              // Catch CORS Error
              return user
            })
        }))
        .then(results => {
          results.forEach((user) => {
            const div = document.createElement('tr');
            div.className = 'Items';
            const lines = [
              `${user.data.name.en_US}`,
              `Item Level ${user.data.level}`,
              `${user.data.inventory_type.name.en_US}`,
              `${user.data.item_subclass.name.en_US}`,
              `Item Class: ${user.data.item_class.name.en_US}`,
              `Item Subclass: ${user.data.item_subclass.name.en_US}`,
              `ID: ${user.data.id}`
            ];
            for (let line of lines) {
              const p = document.createElement('td');
              p.innerText = line;
              div.appendChild(p);
            }

            if (user.assets) {
              for (let asset of user.assets) {
                const i = document.createElement('img');
                i.src = asset.value;
                div.appendChild(i);
              }
            }
            stats.appendChild(div);
          });
        });
    })
    .catch(error => {
      console.error(error);
    });
}

function search() {
  let input = document.getElementById("searchBar").value
  console.log(input);
  if (input.length > 1) {
    return input;
  }
}

function searchExecute() {
  let test = search();
  fetchData(test);
}

document.getElementById("searchBar").addEventListener("click", searchExecute);

<div class="container Wallpaper_Belf_Draenei img-fluid img-thumbnail">
  <div class="row">
    <div class="col-sm-12 mx-auto">
      <form name="userInput" target="_self">
        <h5><input id="searchBar" type="text" placeholder="Enter search here: " class="groove search" style="height:30 px;">
          <button onmousedown="searchExecute()" class="groove search fa fa-search execute_search" style="height: 34px; width: 60px;"></button>
        </h5>
      </form>
    </div>

I've also linked a GIF below to show what it looks like from my end, if that is any help at all. I apologize in advance if this has been answered, but none of the posts I've seen so far have helped.

https://i.stack.imgur.com/0bo6S.jpg

Does this have something to do with scope?