javascript - 使用document.getElementById（''）。innerHTML打印出一个数组会忽略HTML和CSS(Using document.getElementById('').innerHTML to print out an array ignores HTML and CSS)

Question

When using document.getElementById('').innerHTML to print out an array from a function it turns the whole page white and all my HTML and CSS is just ignored.(当使用document.getElementById('').innerHTML从函数中打印出一个数组时，它会使整个页面变白，而我所有的HTML和CSS都将被忽略。)

the code is here: https://github.com/tserrato/bug-free-octo-fiesta(代码在这里： https : //github.com/tserrato/bug-free-octo-fiesta)   ask by tserrato translate from so

Answer 1

Using just reduce , you could do it like this:(使用just reduce ，您可以这样做：)

let movies=[{title:"The Shawshank Redemption",year:1994,director:"Frank Darabont",duration:"2h 22min",genre:["Crime","Drama"],rate:9.3},{title:"The Godfather",year:1972,director:"Francis Ford Coppola",duration:"2h 55min",genre:["Crime","Drama"],rate:9.2},{title:"The Godfather: Part II",year:1974,director:"Francis Ford Coppola",duration:"3h 22min",genre:["Crime","Drama"],rate:9},{title:"The Dark Knight",year:2008,director:"Christopher Nolan",duration:"2h 32min",genre:["Action","Crime","Drama","Thriller"],rate:9},{title:"12 Angry Men",year:1957,director:"Sidney Lumet",duration:"1h 36min",genre:["Crime","Drama"],rate:8.9},{title:'Schindler"s List',year:1993,director:"Steven Spielberg",duration:"3h 15min",genre:["Biography","Drama","History"],rate:8.9},{title:"Pulp Fiction",year:1994,director:"Quentin Tarantino",duration:"2h 34min",genre:["Crime","Drama"],rate:8.9},{title:"The Lord of the Rings: The Return of the King",year:2003,director:"Peter Jackson",duration:"3h 21min",genre:["Adventure","Drama","Fantasy"],rate:8.9},{title:"Il buono, il brutto, il cattivo",year:1966,director:"Sergio Leone",duration:"3h 2min",genre:["Western"],rate:8.9},{title:"Fight Club",year:1999,director:"David Fincher",duration:"2h 19min",genre:["Drama"],rate:8.8},{title:"The Lord of the Rings: The Fellowship of the Ring",year:2001,director:"Peter Jackson",duration:"2h 58min",genre:["Adventure","Drama","Fantasy"],rate:8.8},{title:"Forrest Gump",year:1994,director:"Robert Zemeckis",duration:"2h 22min",genre:["Comedy","Drama","Romance"],rate:8.8},{title:"Star Wars: Episode V - The Empire Strikes Back",year:1980,director:"Irvin Kershner",duration:"2h 4min",genre:["Action","Adventure","Fantasy","Sci-Fi"],rate:8.8},{title:"Inception",year:2010,director:"Christopher Nolan",duration:"2h 28min",genre:["Action","Adventure","Sci-Fi","Thriller"],rate:8.8},{title:"The Lord of the Rings: The Two Towers",year:2002,director:"Peter Jackson",duration:"2h 59min",genre:["Adventure","Drama","Fantasy"],rate:8.7},{title:'One Flew Over the Cuckoo"s Nest',year:1975,director:"Milos Forman",duration:"2h 13min",genre:["Drama"],rate:8.7},{title:"Goodfellas",year:1990,director:"Martin Scorsese",duration:"2h 26min",genre:["Crime","Drama"],rate:8.7},{title:"The Matrix",year:1999,director:"Lana Wachowski",duration:"2h 16min",genre:["Action","Sci-Fi"],rate:8.7},{title:"Shichinin no samurai",year:1954,director:"Akira Kurosawa",duration:"3h 27min",genre:["Adventure","Drama"],rate:8.7},{title:"Star Wars",year:1977,director:"George Lucas",duration:"2h 1min",genre:["Action","Adventure","Fantasy","Sci-Fi"],rate:8.7},{title:"Cidade de Deus",year:2002,director:"Fernando Meirelles",duration:"2h 10min",genre:["Crime","Drama"],rate:8.7},{title:"Se7en",year:1995,director:"David Fincher",duration:"2h 7min",genre:["Crime","Drama","Mystery","Thriller"],rate:8.6},{title:"The Silence of the Lambs",year:1991,director:"Jonathan Demme",duration:"1h 58min",genre:["Crime","Drama","Thriller"],rate:8.6},{title:'It"sa Wonderful Life',year:1946,director:"Frank Capra",duration:"2h 10min",genre:["Drama","Family","Fantasy"],rate:8.6},{title:"La vita è bella",year:1997,director:"Roberto Benigni",duration:"1h 56min",genre:["Comedy","Drama","War"],rate:8.6},{title:"The Usual Suspects",year:1995,director:"Bryan Singer",duration:"1h 46min",genre:["Crime","Drama","Mystery","Thriller"],rate:8.6},{title:"Léon",year:1988,director:"Luc Besson",duration:"1h 50min",genre:["Crime","Drama","Thriller"],rate:8.6},{title:"Saving Private Ryan",year:1998,director:"Steven Spielberg",duration:"2h 49min",genre:["Drama","War"],rate:8.6},{title:"Sen to Chihiro no kamikakushi",year:2001,director:"Hayao Miyazaki",duration:"2h 5min",genre:["Animation","Adventure","Family","Fantasy","Mystery"],rate:8.6},{title:"American History X",year:1998,director:"Tony Kaye",duration:"1h 59min",genre:["Crime","Drama"],rate:8.5},{title:'C"era una volta il West',year:1968,director:"Sergio Leone",duration:"2h 44min",genre:["Western"],rate:8.6},{title:"Interstellar",year:2014,director:"Christopher Nolan",duration:"2h 49min",genre:["Adventure","Drama","Sci-Fi"],rate:8.6},{title:"Psycho",year:1960,director:"Alfred Hitchcock",duration:"1h 49min",genre:["Horror","Mystery","Thriller"],rate:8.5},{title:"The Green Mile",year:1999,director:"Frank Darabont",duration:"3h 9min",genre:["Crime","Drama","Fantasy","Mystery"],rate:8.5},{title:"Casablanca",year:1942,director:"Michael Curtiz",duration:"1h 42min",genre:["Drama","Romance","War"],rate:8.5},{title:"City Lights",year:1931,director:"Charles Chaplin",duration:"1h 27min",genre:["Comedy","Drama","Romance"],rate:8.6},{title:"Intouchables",year:2011,director:"Olivier Nakache",duration:"1h 52min",genre:["Biography","Comedy","Drama"],rate:8.6},{title:"Modern Times",year:1936,director:"Charles Chaplin",duration:"1h 27min",genre:["Comedy","Drama","Family","Romance"],rate:8.5},{title:"Raiders of the Lost Ark",year:1981,director:"Steven Spielberg",duration:"1h 55min",genre:["Action","Adventure"],rate:8.5},{title:"The Pianist",year:2002,director:"Roman Polanski",duration:"2h 30min",genre:["Biography","Drama","Music","War"],rate:8.5},{title:"The Departed",year:2006,director:"Martin Scorsese",duration:"2h 31min",genre:["Crime","Drama","Thriller"],rate:8.5}]; function list() { const final = movies.reduce((acc, item) => acc + item.title + '<br>', '') document.getElementById("nutts").innerHTML = final; } #list { width: 75vw; min-height: 100vh; background-color: #393939; margin: auto; color: white; text-align: center; } <div id="list"> <button onclick="list()"> click for list </button> <div id="nutts"></div> </div>