dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Looping through an array and displaying the content

  1. #1
    Join Date
    Nov 2013
    Posts
    7

    Looping through an array and displaying the content

    I'm doing an exercise where I have to write a program that creates an array of movie objects, then display that information on a webpage. I need to loop through all the movies in the array and all the showtimes for each movie. So far I've gotten the text to display in the console when I replaced "var div" with console.log, but I'm trying to get the info to display on the page itself when the window is loaded. But I got the error "Uncaught TypeError: Cannot set property 'innerHTML' of null".

    I'm a beginner when it comes to this, so any help would be appreciated. Thanks!

    Code:
    <!doctype html>
    <html lang="en">
    <head>
     <title>Movie Objects</title>
     <meta charset="utf-8">
     <script>
    
        var movie1 = {
        name: "American Sniper", 
        year: 2015, 
        genre: "Drama, Action/Adventure", 
        rating: "R", 
        showtimes: ["11:05 AM", " 12:10 PM" , " 2:20 PM", " 3:25 PM", " 5:35 PM", " 6:45 PM", "8:40 PM", " 9:55 PM"]
        }
    
        var movie2 = {
        name: "Project Almanac", 
        year: 2015, 
        genre: "Mystery & Suspense, Science Fiction & Fantasy", 
        rating: "PG-13", 
        showtimes: ["10:40 AM", " 1:25 PM", " 4:10 PM", " 7:10 PM", " 10:10 PM"]
        }
     
        var movie3 = {
        name: "Paddington", 
        year: 2015, 
        genre: "Comedy, Kids & Family", 
        rating: "PG", 
        showtimes: ["11:35 AM", " 2:15 PM", " 4:50 PM", " 7:20 PM", " 10:05 PM"]
        }
    
        var movies = [movie1, movie2, movie3];
        for (var i = 0; i < movies.length; i++) {
          var display = movies[i];
          for (j = 0; j < display.showtimes.length; j++) {
            var div = "The name of the movie is " + display.name + " showtimes are: " + display.showtimes[j] + " it came out in the year " + display.year; 
          } 
        }  
    
        document.getElementById("movies").innerHTML = div;
    
     </script>
    </head>
    <body>
     <h2>Top 3 Box Office Movies of January 2015</h2>
     <div id="movies">
     </div> 
    </body>
    </html>

  2. #2
    Join Date
    Nov 2013
    Posts
    7
    UPDATE: Mods, please close/lock this thread. I have already figured out a solution and rewrote my code.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles