我是Json和Javascript的新手。 我正在尝试使用for循环来动态显示匹配的名称数据但我被困在这里请帮助.for循环没有正确显示数据。它直接进入最后一个指数(即杀手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>
答案 0 :(得分:0)
您每次都会覆盖VSFlexShift.set_TextMatrix(i, 2, objShiftMasterDTO.SHIFT_START.ToString(@"hh\:mm\:ss"));
并丢失之前计算的结果。
innerHTML
您需要使用for(i=0; i<array.length; i++){
if(input_txt.innerHTML.toUpperCase == array[i].name.toUpperCase ){
box1.innerHTML = array[i].name + "<br>"
}
}
运算符附加HTML,以便获得所有结果,但不仅仅是最后一个结果:
+
顺便说一句,比较for(i=0; i<array.length; i++){
if(input_txt.innerHTML.toUpperCase == array[i].name.toUpperCase ){
box1.innerHTML += array[i].name + "<br>"
}
}
或新创建的对象有什么意义? innerHTML
始终为空字符串。
答案 1 :(得分:0)
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>
希望这有帮助!
答案 2 :(得分:0)
首先,你需要清理以前的结果块:
us-east1
然后你需要追加其他结果,所以用box1.innerHTML = '';
替换=
+=