Возврат изображения GIPHY на страницу с GIPHY API из пользовательского поиска - PullRequest
Новая
       48

Возврат изображения GIPHY на страницу с GIPHY API из пользовательского поиска

0 голосов
/ 02 июня 2019

У меня проблемы с отображением на моей странице гифки. Я попытался использовать несколько тактик, таких как append, но все, что я пробовал, получило синтаксическую ошибку, или она просто ничего не вернула. Giphy, который я пытаюсь загрузить на страницу, основан на вводе пользователем и загружается в консоль, так что эта часть работает. Я также использую axios для извлечения данных из API. Любое предложение будет высоко ценится! Я включил некоторые из ошибок, которые я получил ниже.

Я попытался обновить функцию getGiphyMovie до 

```   function getMovieGiphy() {
         console.log(getMovieGiphy);
         axios.get (apiGiphy + input.value)
         .then(function (giphyResponse){
             console.log(giphyResponse);

             document.getElementById(“movie-giphy”).src = giphyResponse.data.data[0].images.original.url;

             //movieGiphy.innerHTML = giphyResponse.data.data[0].images.original.url;
         })``` 

but it breaks the entire page... It won't even return the info on the movies when I try to update it to this. 

HTML:
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Movie and GIPHY API</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

<body>
  <div class="container">
    <h1>Giphy Movie Search</h1>
    <div id="movie-search"></div>
    <!-- This form will be where users input data about the movies -->
    <form class="movie-form">
      <label id="search">Search for a movie</label>
      <input type="text" id="movie-input">
      <!-- This button will trigger our Axios call -->
      <input class="movieBtn" type="submit" value="Search">
    </form>
  </div>
<div class="container-one">
    <p id="title">Movie Title:</p>
    <p id="year">Year Released:</p>
    <p id ="genre">Genre:</p>
    <p id="actors">Actors:</p>
    <img id="movie-giphy"></img>
</div>
  <script type="text/javascript" src="api.js">
  </script>
</body>

</html>


JavaScript

    ```
    //global variables

    //OMDb API set up
    var apiMov = "http://www.omdbapi.com/?apikey=4aba871a&t=";

    //Giphy API set up
    var apiGiphy = "http://api.giphy.com/v1/gifs/search?&api_key=jhXRfz62s0WM7lE63bU7AidiTF6ROBnx&q=";
    //here we are setting up our variables to associate with its designated ID 
    var input = document.querySelector("#movie-input");
    var movieTitle = document.querySelector("#title");
    var movieYear = document.querySelector("#year");
    var movieGenre = document.querySelector("#genre");
    var movieActors = document.querySelector("#actors");
    var movieGiphy = document.querySelector("#movie-giphy");

    //Functions

    //In this function we are getting the movie data from the OMDb API and returning each aspect of the movie to the page
    //Each aspect of the movie will show in it's designated spot
          function getMovieData() {
              axios.get(apiMov + input.value + "&?plot=long")
              .then(function (movieResponse) {
                  movieTitle.innerHTML = "Movie Title: " + movieResponse.data.Title;
                  movieYear.innerHTML = "Year: " + movieResponse.data.Year;
                  movieGenre.innerHTML = "Genre: " + movieResponse.data.Genre;
                  movieActors.innerHTML = "Actors: " + movieResponse.data.Actors;
              })
              .catch(function (error) {
                  movieTitle.innerHTML = "An error has occured.";
                  console.log(error.message);
              });
          }
    //Here, we are running the function to return the giphy for the movie that is searched
          function getMovieGiphy() {
              console.log(getMovieGiphy);
              axios.get (apiGiphy + input.value)
              .then(function (giphyResponse){
                  console.log(giphyResponse);
                  let gif = document.createElement("img");
                       gif.className = "gif";
                       gif.src = giphyResponse.data.data[0].images.original.url;
                        console.log(gif);
                                })
              .catch(function(error){
                movieGiphy.innerHTML = "An error has occured.";
                console.log(error.message);
            });
          }

          var button = document.querySelector(".movieBtn");
          button.addEventListener("click", function(){
            // prevent default will keep the page from reloading so your data persists after the event
              event.preventDefault();
            // moved this function inside of another function call so that you could prevent the page from loading
            getMovieData();
            getMovieGiphy();
          });
    ```

Expected results: to have the giphy image load to the page
actual result: it's only loading to the console-everything I have tried won't load it to the page.
...