對 JavaScript 相當陌生，所以請耐心等待！
我目前正在使用 TVmaze 的 API 構建一個簡單的電視節目分級搜索應用程式，但我無法弄清楚如何在單擊搜索按鈕后將搜索欄移動到頁面頂部。我嘗試創建一個名為 searchBarPos 的函式來洗掉“center”類，但我似乎無法弄清楚為什么它在我的點擊事件偵聽器中不起作用。非常感謝有關如何解決此問題的任何提示！
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);
}
}
}
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;
}
uj5u.com熱心網友回復：
由于行內 CSS 的優先級，我想您可以通過使用 javascript 添加行內 CSS 來實作。嘗試使用：
document.querySelector().addEventHandeler('click', ()=>{
document.querySelector().style.position= "absolute";
document.querySelector().style.top= "0";
....
})
并在單擊頁面中的其他地方時將其帶回另一個事件處理程式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/374107.html
標籤：javascript html css 接口 异步