javascript - 这个 for 循环出了什么问题

Question

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

Answer 1

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>

希望这有帮助!