Question

我正在使用OMDB API，现在我已经建立了页面，并且正在通过搜索和ID进行两次请求。但我遇到的问题是ID。我创建了一个movieID的全局变量，然后在第一个函数中通过API给它提供了电影ID，而当我尝试从var movieID中获取这些ID时，在第二个函数中我通过ID提出了新请求，我只能得到搜索的电影的最后一个ID。我是新来的程序员，所以请多包涵。

HTML

<div id="search-div">
    <input type="text" placeholder="Search movie">
</div>

<ul id="movie-showcase">
</ul>

<div class="movie-detail">

</div>

JAVASCRIPT

const url = 'begining of url by Search';
const apiId = 'apiId';
const input = document.querySelector('input');
const movieDtl = document.querySelector('.movie-detail');
let movieId;

input.addEventListener('keyup', getmovies);

function getmovies(e){
  e.preventDefault();
  if(e.keyCode === 13){
    let xhr = new XMLHttpRequest();
    let inputsearch = input.value;
    xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
        getdatalist(xhr);
    }
   }
    xhr.open('GET', url + inputsearch + apiId, true);
    xhr.send();
 }
}

function getdatalist(xhr){
    let object = JSON.parse(xhr.response);
    let movieList = object.Search;
    movieList.forEach(function(e){  
        movieId = e.imdbID;
        let list = document.createElement('li');
        let movieDetail = '<img src="'+e.Poster+'" alt="Poster"><h4>'+e.Title+'</h4><button>View More</button>';
        list.innerHTML = movieDetail;
        document.querySelector('ul').appendChild(list);
    }) 
    getdata(movieId);

}

function getdata(movieId){
    let vwbtn = document.querySelectorAll('ul li button');
    vwbtn.forEach(function(elem){
      elem.addEventListener('click', function(){
        getListDetail(movieId);
      })
    })

}


function getListDetail(movieId){
    console.log(movieId);
    const secondurl = 'begining of url by ID';
    const mId = movieId;
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
     if(xhr.readyState == 4 && xhr.status == 200){
        let secObject = JSON.parse(xhr.response);
        let detailList = '<div><img src="'+secObject.Poster+'" alt="Poster"><div id="detail-wrap"><div class="layer-1"><h4>'+secObject.Year+'</h4><h4>'+secObject.Released+'</h4><h4>'+secObject.Runtime+'</h4><h4>'+secObject.Genre+'</h4><h4>'+secObject.imdbRating+'</h4></div><h1>'+secObject.Title+'</h1><div class="layer-2"><h4>'+secObject.Production+'</h4><h4>'+secObject.Director+'</h4><h4>'+secObject.Writer+'</h4><h4>'+secObject.Actors+'</h4><h4>'+secObject.Plot+'</h4></div><div class="layer-3"><h4>'+secObject.Language+'</h4><h4>'+secObject.Country+'</h4><button onclick="exitdetail()">Exit</button></div></div></div>';

        movieDtl.innerHTML = detailList;
        movieDtl.style.transform = 'scale(1)';
        }
     }

    xhr.open('GET', secondurl + mId + apiId, true);
    xhr.send();
}


function exitdetail(){
 movieDtl.style.transform = 'scale(0)';

}

Answer 1

将let movieId更改为var movieId或window.movieId。

此外，如果将id存储在全局变量中，则不必在函数中提供参数。您可以直接访问它。

详细了解范围here

Answer 2

函数作用域-在父级为所有需要访问它的函数创建变量。

此外，请不要忘记超级简单的localStorage功能。您确实确实需要掌握变量/函数作用域，但是localStorage总是可以帮助您节省时间。 （此外，在尝试使用范围时，除创可贴之外，它还有其他非常有效的用途。）

无法从一个函数获取所有ID到另一个函数

2 个答案: