Fairly new to JavaScript so bear with me!

I'm currently building a simple TV show rating search app, using TVmaze's API and I'm having trouble figuring out how I can have the search bar move to the top of the page after the search button is clicked. I tried creating a function called searchBarPos to remove the class "center" but I can't seem to figure out why it won't work within my click event listener. Any tips on how to solve this is much appreciated!

JS code:

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);
        }
    }
}

CSS code:

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;
}

CodePudding user response：

i guess you can do it by adding inline CSS with javascript because of priority of inline CSS . try using:

document.querySelector().addEventHandeler('click', ()=>{
  document.querySelector().style.position= "absolute";
  document.querySelector().style.top= "0";
  ....
})

and taking it back with another eventhandeler when somewhere else in the page is clicked.