¡Bastante nuevo en JavaScript, así que tengan paciencia conmigo!

Actualmente estoy creando una aplicación simple de búsqueda de clasificación de programas de TV, usando la API de TVmaze y tengo problemas para descubrir cómo puedo hacer que la barra de búsqueda se mueva a la parte superior de la página después de hacer clic en el botón de búsqueda. Intenté crear una función llamada searchBarPos para eliminar la clase "centro", pero parece que no puedo entender por qué no funcionará dentro de mi detector de eventos de clic. ¡Cualquier consejo sobre cómo resolver esto es muy apreciado!

Código JS:

 const form = document.querySelector("#searchForm"); let div = document.querySelector("#container"); const ul = document.querySelector("#ratingList"); const reset = () => { ul.innerText = ''; } form.addEventListener('submit', async function (e) { e.preventDefault(); reset(); const showName = form.elements.query.value; const config = { params: { q: showName } } const res = await axios.get(`https://api.tvmaze.com/search/shows?q=`, config) display(res.data); form.elements.query.value = ''; }); const display = (shows) => { for (let result of shows) { if (result.show.image) { const img = document.createElement('IMG'); img.classList.add('movieData') img.src = result.show.image.medium; ul.append(img); } if (result.show.name && result.show.premiered) { const title = result.show.name; const date = result.show.premiered; const li = document.createElement('li'); li.classList.add('movieData') li.textContent = `${title} (${date})`; ul.append(li); } if (result.show.rating) { const avg = result.show.rating.average; const li = document.createElement('li'); li.classList.add('movieData') li.textContent = `Rating: ${avg}`; ul.append(li); } } }

Código CSS:

 body { text-align: center; } .center { margin:0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #title { margin-top: 2rem; font-family: 'M PLUS Code Latin', sans-serif; } form { margin-bottom: 3rem; } .movieData{ margin: 0.5rem; font-family: 'M PLUS Code Latin', sans-serif; font-size: 18px; }