我无法在页面上显示图形。我尝试使用一些附加方法，例如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.