在forEach循环后显示HTML时出现问题
在forEach循环后显示HTML时出现问题
提问于 2020-05-01 21:05:16
希望有人能帮上忙。这个小项目的目标是搜索电影数据库OMDB，并在搜索栏下面显示获取的结果。我有一种感觉，当我试图对返回的结果使用forEach循环时，代码会崩溃，但我找不到错误。感谢每一位的帮助！谢谢!
var httpRequest = new XMLHttpRequest();
httpRequest.onload = function() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
var response = JSON.parse(httpRequest.responseText).Search;
var body = document.getElementsByTagName("body");
response.forEach(function (element, index) {
body.appendChild(" <img src="+element[index].Poster+"/>" +
"<p>Title: <a href = 'https://www.imdb.com/title/"+element[index].imdbID+"' >" +element[index].Title+ "</a></p>" +
"<p>Year: "+ element[index].Year+"</p>" +
"<p>Type: "+element[index].Type+"</p>");
});
} else {
console.log(httpRequest.statusText);
}
}
};
httpRequest.onerror = function() {
console.log(httpRequest.statusText);
};
var searchMovie = function () {
var input = document.querySelector('input').value;
if (input) {
httpRequest.open('GET', 'https://www.omdbapi.com/?s=' + input + '&plot=short&apikey=b7da8d63');
httpRequest.send(null);
}
};Stack Overflow用户
发布于 2020-05-01 22:37:49
var httpRequest = new XMLHttpRequest();
httpRequest.onload = function() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
var response = JSON.parse(httpRequest.responseText).Search;
var body =document.getElementById('main')
body.innerHTML = ""
//document.getElementsByTagName("body");
response.forEach(function (element, index) {
var img=document.createElement('img')
img.src=element.Poster
var p1=document.createElement('p')
p1.textContent='Title :'
var a=document.createElement('a')
a.textContent=element.Title
a.href=`https://www.imdb.com/title/${element.imdbID}`
p1.appendChild(a)
var p2=document.createElement('p')
p2.textContent=`Year: ${element.Year}`
var p3=document.createElement('p')
p3.textContent=`Type: ${element.Type}`
var div=document.createElement('div')
div.appendChild(img)
div.appendChild(p1)
div.appendChild(p2)
div.appendChild(p3)
body.appendChild(div);
});
} else {
console.log(httpRequest.statusText);
}
}
};
httpRequest.onerror = function() {
console.log(httpRequest.statusText);
};
var searchMovie = function () {
var input = document.querySelector('input').value;
if (input) {
httpRequest.open('GET', 'https://www.omdbapi.com/?s=' + input + '&plot=short&apikey=b7da8d63');
httpRequest.send(null);
}
};
searchMovie();
var eve = document.getElementById("myInput");
eve.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
searchMovie();
}
});;.input{
position: fixed;}<input type="text" class="input" id="myInput" name="country" value="time" ><br><br>
<span id="main"></span>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61543067
复制相关文章
相似问题
腾讯云开发者
