这个for循环有什么不对

时间:2015-12-03 07:10:57

标签: javascript for-loop

我是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>

3 个答案:

答案 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 = ''; 替换=

+=