Как сбросить входное значение формы при изменении входного значения? - PullRequest
Новая
       6

Как сбросить входное значение формы при изменении входного значения?

0 голосов
/ 04 мая 2018

После того, как я отправил форму с именем актера / актрисы, и в ней перечислены фильмы, если я хочу искать снова, введя другое имя, при первом нажатии кнопки ввода возвращаются те же фильмы, что и при первом поиске, и если я затем снова нажимаю «Enter» с введенным новым именем, в нем перечислены фильмы этого актера / актрисы. Так что в основном в нем перечислены фильмы при каждой второй отправке (учитывая, что имя актера / актрисы менялось). Это можно обойти? Я попытался добавить sessionStorage.clear() в функцию отправки формы, которая не работает. Я также попытался actor.value.clear(), но это очищает значение ввода формы и ничего не перечисляет. Любая помощь высоко ценится, большое спасибо заранее. Вот код: 

const form = document.getElementById("form");
form.addEventListener("submit", (e)=>{
    var actor = document.getElementById("actor").value;
    var byActor = document.getElementById("byActor");
    byActor.innerHTML = actor;
    discoverByActor(actor);
    moviesByActor();
    e.preventDefault();
})
function discoverByActor(actor){
    axios.get("https://api.themoviedb.org/3/search/person?api_key=<API_KEY>&language=en-US&query="+actor+'&page=1&include_adult=false')
        .then((response)=>{
            let actorId = response.data.results[0].id;
            sessionStorage.setItem("theActorId", actorId);
        })
};
function moviesByActor(){
    let actorId = sessionStorage.getItem("theActorId");
    axios.get("https://api.themoviedb.org/3/discover/movie?api_key=<API_KEY>&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1&with_people="+actorId)
        .then((response)=>{
            console.log(response);
            let movies = response.data.results;
            let output = "";

            $.each(movies, (index, movie)=>{
                output +=`
                <div class="card">
                        <img src="http://image.tmdb.org/t/p/w300/${movie.poster_path}" onerror="this.onerror=null;this.src='../images/image2.png';">
                        <h3>${movie.title}</h3>
                        <p>${movie.vote_average} <strong>IMDB Rating</strong></p>
                        <p>Release date: <strong>${movie.release_date}</strong></p>
                        <a onclick="movieSelected('${movie.id}')" class="btn" href="#"> Movie Details </a>
                    </div>
                `
            })
            let moviesInfo = document.getElementById("movies");
            moviesInfo.innerHTML = output;
            //Display pages buttons.
            let pages = document.querySelector(".pages");
            pages.style.display = "flex";
            var actor = document.getElementById("actor");
        })
}

1 Ответ

0 голосов
/ 05 мая 2018 
sessionStorage.setItem("theActorId", actorId);

не произойдет, пока вы не получите ответ от axios.get. Тем не менее, вы звоните moviesByActor до того, что делает 

let actorId = sessionStorage.getItem("theActorId");

Что вы, вероятно, хотите сделать, это: 

form.addEventListener("submit", (e)=>{
    // ...
    discoverByActor(actor).then(moviesByActor);
    // ...
})

function discoverByActor(actor){
    return axios.get("https://api.themoviedb.org/3/search/person?api_key=<API_KEY>&language=en-US&query="+actor+'&page=1&include_adult=false')
    .then((response)=>{
        let actorId = response.data.results[0].id;
        sessionStorage.setItem("theActorId", actorId);
    })
};

Кроме того, если вам на самом деле не нужен actorId в сеансе, вы можете сделать: 

form.addEventListener("submit", (e)=>{
    // ...
    discoverByActor(actor).then(moviesByActor);
    // ...
})

function discoverByActor(actor){
    return axios.get("https://api.themoviedb.org/3/search/person?api_key=<API_KEY>&language=en-US&query="+actor+'&page=1&include_adult=false')
    .then((response)=>{
        return response.data.results[0].id;
    })
};

function moviesByActor(actorId) {
    axios.get( /* ... */ );
    // ...
}

JavaScript имеет модель параллелизма, основанную на "цикле событий". Очень интересное свойство модели цикла событий состоит в том, что JavaScript, в отличие от многих других языков, никогда не блокируется (за исключением alert или синхронного XHR, и я уверен, что некоторые другие).

axios.get(url).then(doSomething) является асинхронным, поэтому, когда вы делаете это, вы говорите компьютеру: «идите, извлеките все, что находится по этому URL-адресу, и , как только вы получите ответ , отправьте ответ на doSomething. В тем временем продолжайте запускать остальную часть этого кода.

Итак, когда вы набрали discoverByActor(actor); moviesByActor();, вы звонили moviesByActor , даже если вы ничего не получили от discoverByActor.

Конечно, было бы сложно запрограммировать, если бы вы не могли контролировать порядок происходящего, поэтому для решения этой проблемы мы используем то, что называется Promises.

С обещанием, мы можем сказать, иди и получи этот URL, используя axios.get, .then, используй этот результат, чтобы сделать эту другую вещь, .then используй то, что , которое вернется, чтобы сделать эту другую вещь .

Итак, у меня было discoverByActor return axios.get, чтобы я мог получить доступ к методу .then, чтобы я мог вынести, что moviesByActor будет иметь данные, необходимые для запуска.

...