我对 Json 和 Javascript 非常陌生。 我正在尝试使用 for 循环动态显示匹配名称的数据，但我被困在这里请帮助。for 循环未正确显示数据。它会直接转到最后一个索引(即 hitman Agen 47)。
<script>
var array =[{name:"Tommorrowland" , rating:"6.7" , poster:[{mode:"portrait" , url:"http://posterposse.com/wp-content/uploads/2015/05/tomorrowland54fa25d19980e.jpg"} , {mode:"portrait" , url:"http://i2.wp.com/geeknewsnetwork.net/wp-content/uploads/2015/05/Tomorrowland_poster.png"}] , cover_image:"https://nelsonriveramovies.files.wordpress.com/2015/09/tomorrowland_poster.jpg" , trailer:[{date:"3-May-2014" , url:"https://www.youtube.com/watch?v=1k59gXTWf-A"} , {date:"10-Jun-2014" , url:"https://www.youtube.com/watch?v=jYBwC-pNA3o"}] , release_date:"7-Sep-2015"} , {name:"Pixels" , rating:"7.7" , poster:[{mode:"portrait" , url:"http://t3.gstatic.com/images?q=tbn:ANd9GcRURiZVhRuxkPIU3h5yyUaAt7dX7Bro_aup-aPRjW7j10J5jWuS"},{mode:"portrait" , url:"http://cdn.traileraddict.com/content/columbia-pictures/pixels-poster-2.jpg"}] , cover_image:"http://www.najfilmy.sk/wp-content/uploads/2015/10/Pixels-2015-Front-Cover-104243.jpg" , trailer:[{date:"17-May-2014" , url:"https://www.youtube.com/watch?v=XAHprLW48no"}, {date:"19-May-2014" , url:"https://www.youtube.com/watch?v=2XWzrOzq22E"}] , release_date:"24-Jul-2015"} , {name:"Hitman:Agent 47" , rating:"5.7" , poster:[{mode:"portrait" , url:"http://cdn3-www.comingsoon.net/assets/uploads/1970/01/file_603510_hitman-agent-47-poster.jpg"},{mode:"landscape" , url:"http://www.thecreativepartnership.co.uk/content/uploads/2015/05/QUAD_AGENT-42_DATED_f.jpg"}] , cover_image:"http://www.covershut.com/covers/Hitman-Agent-47-2015--Front-Cover-105703.jpg" , trailer:[{date:"10-May-2014" , url:"https://www.youtube.com/watch?v=1k59gXTWf-A"}, {date:"1-Jun-2014" , url:"https://www.youtube.com/watch?v=k7X8fCUMMVM"}] , release_date:"22-Aug-2015"}];
var sub_but;
sub_but = document.getElementById("sub_but");
mov_names = document.getElementById("movie_name");
sub_but.onclick = function (e) {
var container = document.createElement("div");
var input_txt=document.getElementById("input");
var box1 = document.createElement("div");
var box2 = document.createElement("div");
var box3 = document.createElement("div");
box1.setAttribute("id", "box1");
//whots wrong in this loop
for(i=0; i<array.length; i++){
if(input_txt.innerHTML.toUpperCase == array[i].name.toUpperCase ){
box1.innerHTML = array[i].name + "<br>"
}
}
box2.setAttribute("id", "box2");
box3.setAttribute("id", "box3");
container.setAttribute("id", "container");
container.appendChild(box1);
container.appendChild(box2);
container.appendChild(box3);
document.body.appendChild(container);
}
</script>
<!-- language: lang-html -->
<form action="#">
Enter the movie name : <input type="text" id="input">
</form>
<button id="sub_but">Click Here</button>
最佳答案
try to use .value for input element.
例如，请参阅我的代码片段。
var array = [
{
name:"Tommorrowland" ,
rating:"6.7" ,
poster : [
{
mode:"portrait" ,
url:"http://posterposse.com/wp-content/uploads/2015/05/tomorrowland54fa25d19980e.jpg"
} , {
mode:"portrait" ,
url:"http://i2.wp.com/geeknewsnetwork.net/wp-content/uploads/2015/05/Tomorrowland_poster.png"
} ] ,
cover_image:"https://nelsonriveramovies.files.wordpress.com/2015/09/tomorrowland_poster.jpg" ,
trailer:[ {
date:"3-May-2014" , url:"https://www.youtube.com/watch?v=1k59gXTWf-A"
} , {
date:"10-Jun-2014" , url:"https://www.youtube.com/watch?v=jYBwC-pNA3o"
}] ,
release_date:"7-Sep-2015"
}
, {
name:"Pixels" ,
rating:"7.7" ,
poster:[ {
mode:"portrait" ,
url:"http://t3.gstatic.com/images?q=tbn:ANd9GcRURiZVhRuxkPIU3h5yyUaAt7dX7Bro_aup-aPRjW7j10J5jWuS"
},{
mode:"portrait" ,
url:"http://cdn.traileraddict.com/content/columbia-pictures/pixels-poster-2.jpg"
}] ,
cover_image:"http://www.najfilmy.sk/wp-content/uploads/2015/10/Pixels-2015-Front-Cover-104243.jpg" ,
trailer:[ {
date:"17-May-2014" ,
url:"https://www.youtube.com/watch?v=XAHprLW48no"
}, {
date:"19-May-2014" ,
url:"https://www.youtube.com/watch?v=2XWzrOzq22E"
}] ,
release_date:"24-Jul-2015"
}
, {
name:"Hitman:Agent 47" ,
rating:"5.7" ,
poster:[ {
mode:"portrait" ,
url:"http://cdn3-www.comingsoon.net/assets/uploads/1970/01/file_603510_hitman-agent-47-poster.jpg"
},{
mode:"landscape" ,
url:"http://www.thecreativepartnership.co.uk/content/uploads/2015/05/QUAD_AGENT-42_DATED_f.jpg"
}] ,
cover_image:"http://www.covershut.com/covers/Hitman-Agent-47-2015--Front-Cover-105703.jpg" ,
trailer:[{
date:"10-May-2014" , url:"https://www.youtube.com/watch?v=1k59gXTWf-A"
}, {
date:"1-Jun-2014" ,
url:"https://www.youtube.com/watch?v=k7X8fCUMMVM"
}] ,
release_date:"22-Aug-2015"
}];
var sub_but;
sub_but = document.getElementById("sub_but");
mov_names = document.getElementById("movie_name");
sub_but.onclick = function (e) {
var container = document.createElement("div");
var input_txt=document.getElementById("input");
var box1 = document.createElement("div");
var box2 = document.createElement("div");
var box3 = document.createElement("div");
box1.setAttribute("id", "box1");
//whots wrong in this loop
var founded = false;
for(i=0; i<array.length; i++){
if(input_txt.value.toUpperCase() == array[i].name.toUpperCase()){
box1.innerHTML = array[i].name + "<br>";
founded = true;
}
}
if(!founded)
box1.innerHTML = input_txt.value + " is not founded.";
box2.setAttribute("id", "box2");
box3.setAttribute("id", "box3");
container.setAttribute("id", "container");
container.appendChild(box1);
container.appendChild(box2);
container.appendChild(box3);
document.body.appendChild(container);
} <form action="#">
Enter the movie name : <input type="text" id="input">
</form>
<button id="sub_but">Click Here</button>希望这有帮助!
关于javascript - 这个 for 循环出了什么问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34059831/