Some Dom Scripting Help

[Caitlin-havener]

I've programmed this page to make a window appear when you click on the images on the bottom. How do I program it to go away when the user clicks anywhere else!? I don't know how to listen for clicking anywhere else...

// JavaScript Documentfunction infoBannerContent(name, number, date, rating, network, description){console.log(name);  var changingContentDiv = document.getElementById('changingContent');   while(changingContentDiv.hasChildNodes()){   changingContentDiv.removeChild(changingContentDiv.lastChild);  }   var newEpisodeName = document.createElement('h1');  var episodeName = document.createTextNode(name);  newEpisodeName.setAttribute('class', 'episodeInfoHeader');  newEpisodeName.appendChild(episodeName);   changingContentDiv.appendChild(newEpisodeName);   var newEpisodeSeasonNumber = document.createElement('h2');  var episodeSeasonNumber = document.createTextNode(number);  newEpisodeSeasonNumber.setAttribute('class', 'episodeInfo');  newEpisodeSeasonNumber.appendChild(episodeSeasonNumber);   changingContentDiv.appendChild(newEpisodeSeasonNumber);   var newAirDate = document.createElement('h2');  var airDate = document.createTextNode('Air Date: ' + date);  newAirDate.setAttribute('class', 'episodeInfo');  newAirDate.appendChild(airDate);   changingContentDiv.appendChild(newAirDate);   var newRating = document.createElement('h2');  var rating = document.createTextNode('Rated: ' + rating);  newRating.setAttribute('class', 'episodeInfo');  newRating.appendChild(rating);   changingContentDiv.appendChild(newRating);   var newNetworkStudio = document.createElement('h2');  var networkStudio = document.createTextNode('Network Studio: ' + network);  newNetworkStudio.setAttribute('class', 'episodeInfo');  newNetworkStudio.appendChild(networkStudio);   changingContentDiv.appendChild(newNetworkStudio);  var newDescription = document.createElement('h2');  var description = document.createTextNode(description);  newDescription.setAttribute('class', 'episodeInfo');  newDescription.appendChild(description);   changingContentDiv.appendChild(newDescription);}function infoBanner(){var titleOfCurrentAnchor = this.getAttribute('title');if (titleOfCurrentAnchor == 'jayLeno'){   var name = "The Tonight Show with Jay Leno: Mon, Nov 21, 2011";  var number = "Season 20 : Ep. 4150";  var date = "11/21/2011";  var rating = "TV-PG";  var network = "NBC";  var description = "Dennis Miller, David \& Sean La Vau, Javier Colon.";   infoBannerContent(name, number, date, rating, network, description);   var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'visible';  changingContentContainerDiv.style.left = '330px';  changingContentContainerDiv.style.top = '350px'; }else if (titleOfCurrentAnchor == 'modernFamily'){   var name = "Modern Family: Punkin Chunkin";  var number = "Season 3 : Ep.9";  var date = "11/23/2011";  var rating = "TV-PG";  var network = "ABC";  var description = "Jay thinks Manny needs constructive criticism.";   infoBannerContent(name, number, date, rating, network, description);   var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'visible';  changingContentContainerDiv.style.left = '330px';  changingContentContainerDiv.style.top = '500px'; }else if (titleOfCurrentAnchor == 'upAllNight'){  var name = "Up All Night : Week Off";  var number = "Season 1 : Ep. 10";  var date = "11/23/2011";  var rating = "TV-PG";  var network = "NBC";  var description = "Ava struggles to connect with Kevin's daughter while Reagan brings her Type-A behavior home.";   infoBannerContent(name, number, date, rating, network, description);   var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'visible';  changingContentContainerDiv.style.left = '330px';  changingContentContainerDiv.style.top = '650px'; }else if (titleOfCurrentAnchor == 'fringe'){  var name = "Fringe : Wallflower";  var number = "Season 4 : Ep. 7";  var date = "11/18/2011";  var rating = "TV-14";  var network = "Fox";  var description = "The Fringe Team investigates an unknown, genetic disorder.";   infoBannerContent(name, number, date, rating, network, description);   var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'visible';  changingContentContainerDiv.style.left = '330px';  changingContentContainerDiv.style.top = '775px'; }else if (titleOfCurrentAnchor == 'newGirl'){  var name = "New Girl : Thanksgiving";  var number = "Season 1 : Ep. 6";  var date = "11/15/2011";  var rating = "TV-PG";  var network = "Fox";  var description = "Thanksgiving goes awry.";   infoBannerContent(name, number, date, rating, network, description);   var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'visible';  changingContentContainerDiv.style.left = '200px';  changingContentContainerDiv.style.top = '350px'; }else if (titleOfCurrentAnchor == 'revenge'){  var name = "Revenge : Suspicion";  var number = "Season 1 : Ep. 9";  var date = "11/23/2011";  var rating = "TV-PG";  var network = "ABC";  var description = "Realizing she has lost a valuable ally, Emily reaches out to her mentor.";   infoBannerContent(name, number, date, rating, network, description);   var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'visible';  changingContentContainerDiv.style.left = '200px';  changingContentContainerDiv.style.top = '500px'; }else if (titleOfCurrentAnchor == 'saturdayNight'){  var name = "Saturday Night Live : Jason Segel";  var number = "Season 37 : Ep. 7";  var date = "11/19/2011";  var rating = "TV-14";  var network = "NBC";  var description = "Jason Segel hosts Saturday Night Live with musical guest Florence + the Machine!";   infoBannerContent(name, number, date, rating, network, description);   var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'visible';  changingContentContainerDiv.style.left = '200px';  changingContentContainerDiv.style.top = '650px'; }else if (titleOfCurrentAnchor == 'americanDad'){  var name = "American Dad! :  The Worst Stan";  var number = "Season 7 : Ep. 4";  var date = "11/13/2011";  var rating = "TV-14";  var network = "Fox";  var description = "Stan plays best man.";   infoBannerContent(name, number, date, rating, network, description);   var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'visible';  changingContentContainerDiv.style.left = '200px';  changingContentContainerDiv.style.top = '775px';}else{  var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'hidden';}}function init(){var jayLenoAnchor = document.getElementById('jayLeno');jayLenoAnchor.addEventListener('click', infoBanner, false);var modernFamilyAnchor = document.getElementById('modernFamily');modernFamilyAnchor.addEventListener('click', infoBanner, false);var upAllNightAnchor = document.getElementById('upAllNight');upAllNightAnchor.addEventListener('click', infoBanner, false);var fringeAnchor = document.getElementById('fringe');fringeAnchor.addEventListener('click', infoBanner, false);var newGirlAnchor = document.getElementById('newGirl');newGirlAnchor.addEventListener('click', infoBanner, false);var revengeAnchor = document.getElementById('revenge');revengeAnchor.addEventListener('click', infoBanner, false);var saturdayNightAnchor = document.getElementById('saturdayNight');saturdayNightAnchor.addEventListener('click', infoBanner, false);var americanDadAnchor = document.getElementById('americanDad');americanDadAnchor.addEventListener('click', infoBanner, false);var onTheBody = document.getElementsByTagName("body");onTheBody.addEventListener('click',infoBanner,false);}window.addEventListener('load', init, false);

[Ingolme]

In these cases, you just need to listen for clicks on the document.body element.

[Caitlin-havener]

I'm putting "document.body.addEventListener('click', infoBanner, false);" and its throwing me error: "Uncaught TypeError: Cannot call method 'addEventListener' of null"...

[Ingolme]

How could document.body possibly be null?Try seeing what it is:alert(document.body); Are you sure you typed it correctly?

[Caitlin-havener]

It alerts "null" LOL. I copy pasted it exactly. Heres the whole thing. Code below: Javascript- that part is near the bottom

// JavaScript Document//MODAL WINDOWS MAIN PAGEfunction infoBannerContent(name, number, date, rating, network, description){console.log(name);  var changingContentDiv = document.getElementById('changingContent');   while(changingContentDiv.hasChildNodes()){   changingContentDiv.removeChild(changingContentDiv.lastChild);  }   var newEpisodeName = document.createElement('h1');  var episodeName = document.createTextNode(name);  newEpisodeName.setAttribute('class', 'episodeInfoHeader');  newEpisodeName.appendChild(episodeName);   changingContentDiv.appendChild(newEpisodeName);   var newEpisodeSeasonNumber = document.createElement('h2');  var episodeSeasonNumber = document.createTextNode(number);  newEpisodeSeasonNumber.setAttribute('class', 'episodeInfo');  newEpisodeSeasonNumber.appendChild(episodeSeasonNumber);   changingContentDiv.appendChild(newEpisodeSeasonNumber);   var newAirDate = document.createElement('h2');  var airDate = document.createTextNode('Air Date: ' + date);  newAirDate.setAttribute('class', 'episodeInfo');  newAirDate.appendChild(airDate);   changingContentDiv.appendChild(newAirDate);   var newRating = document.createElement('h2');  var rating = document.createTextNode('Rated: ' + rating);  newRating.setAttribute('class', 'episodeInfo');  newRating.appendChild(rating);   changingContentDiv.appendChild(newRating);   var newNetworkStudio = document.createElement('h2');  var networkStudio = document.createTextNode('Network Studio: ' + network);  newNetworkStudio.setAttribute('class', 'episodeInfo');  newNetworkStudio.appendChild(networkStudio);   changingContentDiv.appendChild(newNetworkStudio);  var newDescription = document.createElement('h2');  var description = document.createTextNode(description);  newDescription.setAttribute('class', 'episodeInfo');  newDescription.appendChild(description);   changingContentDiv.appendChild(newDescription);}function infoBanner(){//switched attribute from name to idvar titleOfCurrentAnchor = this.getAttribute('id');if (titleOfCurrentAnchor == 'jayLeno'){   var name = "The Tonight Show with Jay Leno: Mon, Nov 21, 2011";  var number = "Season 20 : Ep. 4150";  var date = "11/21/2011";  var rating = "TV-PG";  var network = "NBC";  var description = "Dennis Miller, David \& Sean La Vau, Javier Colon.";   infoBannerContent(name, number, date, rating, network, description);   var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'visible';  changingContentContainerDiv.style.left = '330px';  changingContentContainerDiv.style.top = '350px';  //HOW TO CHANGE BORDER COLOR  document.getElementById('jayLeno').style.borderColor = '#74b928';}else if (titleOfCurrentAnchor == 'modernFamily'){   var name = "Modern Family: Punkin Chunkin";  var number = "Season 3 : Ep.9";  var date = "11/23/2011";  var rating = "TV-PG";  var network = "ABC";  var description = "Jay thinks Manny needs constructive criticism.";   infoBannerContent(name, number, date, rating, network, description);   var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'visible';  changingContentContainerDiv.style.left = '330px';  changingContentContainerDiv.style.top = '500px'; }else if (titleOfCurrentAnchor == 'upAllNight'){  var name = "Up All Night : Week Off";  var number = "Season 1 : Ep. 10";  var date = "11/23/2011";  var rating = "TV-PG";  var network = "NBC";  var description = "Ava struggles to connect with Kevin's daughter while Reagan brings her Type-A behavior home.";   infoBannerContent(name, number, date, rating, network, description);   var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'visible';  changingContentContainerDiv.style.left = '330px';  changingContentContainerDiv.style.top = '650px'; }else if (titleOfCurrentAnchor == 'fringe'){  var name = "Fringe : Wallflower";  var number = "Season 4 : Ep. 7";  var date = "11/18/2011";  var rating = "TV-14";  var network = "Fox";  var description = "The Fringe Team investigates an unknown, genetic disorder.";   infoBannerContent(name, number, date, rating, network, description);   var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'visible';  changingContentContainerDiv.style.left = '330px';  changingContentContainerDiv.style.top = '775px'; }else if (titleOfCurrentAnchor == 'newGirl'){  var name = "New Girl : Thanksgiving";  var number = "Season 1 : Ep. 6";  var date = "11/15/2011";  var rating = "TV-PG";  var network = "Fox";  var description = "Thanksgiving goes awry.";   infoBannerContent(name, number, date, rating, network, description);   var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'visible';  changingContentContainerDiv.style.left = '200px';  changingContentContainerDiv.style.top = '350px'; }else if (titleOfCurrentAnchor == 'revenge'){  var name = "Revenge : Suspicion";  var number = "Season 1 : Ep. 9";  var date = "11/23/2011";  var rating = "TV-PG";  var network = "ABC";  var description = "Realizing she has lost a valuable ally, Emily reaches out to her mentor.";   infoBannerContent(name, number, date, rating, network, description);   var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'visible';  changingContentContainerDiv.style.left = '200px';  changingContentContainerDiv.style.top = '500px'; }else if (titleOfCurrentAnchor == 'saturdayNight'){  var name = "Saturday Night Live : Jason Segel";  var number = "Season 37 : Ep. 7";  var date = "11/19/2011";  var rating = "TV-14";  var network = "NBC";  var description = "Jason Segel hosts Saturday Night Live with musical guest Florence + the Machine!";   infoBannerContent(name, number, date, rating, network, description);   var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'visible';  changingContentContainerDiv.style.left = '200px';  changingContentContainerDiv.style.top = '650px'; }else if (titleOfCurrentAnchor == 'americanDad'){  var name = "American Dad! :  The Worst Stan";  var number = "Season 7 : Ep. 4";  var date = "11/13/2011";  var rating = "TV-14";  var network = "Fox";  var description = "Stan plays best man.";   infoBannerContent(name, number, date, rating, network, description);   var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'visible';  changingContentContainerDiv.style.left = '200px';  changingContentContainerDiv.style.top = '775px';}else{  var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'hidden';}}function printQueueList(currentQueue){var changingContentDiv = document.getElementById('changingContentQueue'); while(changingContentDiv.hasChildNodes()){  changingContentDiv.removeChild(changingContentDiv.lastChild);}for(i=1; i<=episodes.length; i++){   if(episodes[i][1] == currentQueue){    var showDiv = document.createElement('div');    showDiv.setAttribute('class','showDiv');       var newShowImg = document.createElement('img');    newShowImg.setAttribute('src', episodes[i][0]);    newShowImg.setAttribute('class', 'newShowImg');    newShowImg.setAttribute('alt','Episode Thumbnail');    showDiv.appendChild(newShowImg);       var newShow = document.createElement('h1');    var newShowText = document.createTextNode(episodes[i][1]);    newShow.setAttribute('class','queueShowHeader');    newShow.appendChild(newShowText);    showDiv.appendChild(newShow);       var newEpisode = document.createElement('h1');    var newEpisodeText = document.createTextNode(episodes[i][2]);    newEpisode.setAttribute('class','queueEpisodeHeader');    newEpisode.appendChild(newEpisodeText);    showDiv.appendChild(newEpisode);       var newEpisodeNumber = document.createElement('h2');    var newEpisodeNumberText = document.createTextNode(episodes[i][3]);    newEpisodeNumber.setAttribute('class', 'queueEpisodeNumber');    newEpisodeNumber.appendChild(newEpisodeNumberText);    showDiv.appendChild(newEpisodeNumber);    changingContentDiv.appendChild(showDiv);   }   else if(currentQueue=='All Titles'){    var showDiv = document.createElement('div');    showDiv.setAttribute('class','showDiv');       var newShowImg = document.createElement('img');    newShowImg.setAttribute('src', episodes[i][0]);    newShowImg.setAttribute('class', 'newShowImg');    newShowImg.setAttribute('alt','Episode Thumbnail');    showDiv.appendChild(newShowImg);       var newShow = document.createElement('h1');    var newShowText = document.createTextNode(episodes[i][1]);    newShow.setAttribute('class','queueShowHeader');    newShow.appendChild(newShowText);    showDiv.appendChild(newShow);       var newEpisode = document.createElement('h1');    var newEpisodeText = document.createTextNode(episodes[i][2]);    newEpisode.setAttribute('class','queueEpisodeHeader');    newEpisode.appendChild(newEpisodeText);    showDiv.appendChild(newEpisode);       var newEpisodeNumber = document.createElement('h2');    var newEpisodeNumberText = document.createTextNode(episodes[i][3]);    newEpisodeNumber.setAttribute('class', 'queueEpisodeNumber');    newEpisodeNumber.appendChild(newEpisodeNumberText);    showDiv.appendChild(newEpisodeNumber);    changingContentDiv.appendChild(showDiv);   }  }}function clickQueue(){var titleOfCurrentAnchor = this.getAttribute('id');if (titleOfCurrentAnchor == 'newGirlQueue'){  var currentQueue = 'New Girl';  printQueueList(currentQueue);}else if(titleOfCurrentAnchor == 'allTitlesQueue'){  var currentQueue = 'All Titles';  printQueueList(currentQueue);}else if(titleOfCurrentAnchor == 'upAllNightQueue'){  var currentQueue = 'Up All Night';  printQueueList(currentQueue);}else if(titleOfCurrentAnchor == 'desperateQueue'){  var currentQueue = 'Desperate Housewives';  printQueueList(currentQueue);}}function init(){var page = document.getElementsByTagName('div');var pageTitle = page[0].getAttribute('id');if (pageTitle == 'QueuePage'){  var newGirlQueue= document.getElementById('newGirlQueue');  newGirlQueue.addEventListener('click', clickQueue, false);  var allTitlesQueue = document.getElementById('allTitlesQueue');  allTitlesQueue.addEventListener('click',clickQueue, false);  var upAllNightQueue = document.getElementById('upAllNightQueue');  upAllNightQueue.addEventListener('click',clickQueue, false);  var desperateQueue = document.getElementById('desperateQueue');  desperateQueue.addEventListener('click',clickQueue, false);}if(pageTitle == 'MainPage'){  var jayLenoAnchor = document.getElementById('jayLeno');  jayLenoAnchor.addEventListener('click', infoBanner, false);  var modernFamilyAnchor = document.getElementById('modernFamily');  modernFamilyAnchor.addEventListener('click', infoBanner, false);  var upAllNightAnchor = document.getElementById('upAllNight');  upAllNightAnchor.addEventListener('click', infoBanner, false);  var fringeAnchor = document.getElementById('fringe');  fringeAnchor.addEventListener('click', infoBanner, false);  var newGirlAnchor = document.getElementById('newGirl');  newGirlAnchor.addEventListener('click', infoBanner, false);  var revengeAnchor = document.getElementById('revenge');  revengeAnchor.addEventListener('click', infoBanner, false);  var saturdayNightAnchor = document.getElementById('saturdayNight');  saturdayNightAnchor.addEventListener('click', infoBanner, false);  var americanDadAnchor = document.getElementById('americanDad');  americanDadAnchor.addEventListener('click', infoBanner, false);} }window.addEventListener('load', init, false);document.body.addEventListener('click', infoBanner, false);//window.addEventListener('click', infoBanner, false);var episodes = new Array();  episodes[1]= new Array("img/newgirl/newgirl_01.jpg", "New Girl", "Thanksgiving", "Season 1 : Ep. 6");  episodes[2]= new Array("img/newgirl/newgirl_02.jpg", "New Girl", "CeCe Crashes", "Season 1 : Ep. 5");  episodes[3]= new Array("img/newgirl/newgirl_03.jpg", "New Girl", "Naked", "Season 1 : Ep. 4");  episodes[4]= new Array("img/newgirl/newgirl_04.jpg", "New Girl", "Wedding", "Season 1 : Ep. 3");  episodes[5]= new Array("img/newgirl/newgirl_05.jpg", "New Girl", "Kryptonite", "Season 1 : Ep. 2");  episodes[6]= new Array("img/upallnight/upallnight_01.jpg", "Up All Night", "Week Off", "Season 1 : Ep. 10");  episodes[7]= new Array("img/upallnight/upallnight_02.jpg", "Up All Night", "Hiring and Firing", "Season 1 : Ep. 9");  episodes[8]= new Array("img/upallnight/upallnight_03.jpg", "Up All Night", "First Night Away", "Season 1 : Ep. 8");  episodes[9]= new Array("img/upallnight/upallnight_04.jpg", "Up All Night", "Parents", "Season 1 : Ep. 7");  episodes[10]= new Array("img/upallnight/upallnight_05.jpg", "Up All Night", "Birth", "Season 1 : Ep. 6");  episodes[11]= new Array("img/desperate/desperate_01.jpg", "Desperate Housewives", "Suspicion Song", "Season 8 : Ep. 8");  episodes[12]= new Array("img/desperate/desperate_02.jpg", "Desperate Housewives", "Always in Control", "Season 8 : Ep. 7");  episodes[13]= new Array("img/desperate/desperate_03.jpg", "Desperate Housewives", "Witch's Lament", "Season 8 : Ep. 6");  episodes[14]= new Array("img/desperate/desperate_04.jpg", "Desperate Housewives", "The Art of Making Art", "Season 8 : Ep. 5");  episodes[15]= new Array("img/desperate/desperate_05.jpg", "Desperate Housewives", "School of Hard Knocks", "Season 8 : Ep. 4");    alert(document.body);

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Main - Caitlin Havener</title><link rel="stylesheet" type="text/css" href="css/reset.css" /><link rel="stylesheet" type="text/css" href="css/960.css" /><link rel="stylesheet" type="text/css" href="css/text.css" /><link rel="stylesheet" type="text/css" href="css/styles.css" /><script type="text/javascript" src="js/a3.js"></script></head><body><div class="container_12" id="MainPage">	 <div class="grid_10 prefix_1 suffix_1">		 <div id="topGutter">		    </div>	    </div>	   	    <div class="grid_10 prefix_1 suffix_1" id="navContainer">				    <img src="img/hulupluslogo.gif" alt="" id="logoImg"/>				    <ul id="navList">					    <a href="main.html"><li>Main</li></a>					    <a href="#"><li>TV</li></a>					    <a href="#"><li>Movies</li></a>					    <a href="queue.html"><li>Queue</li></a>				    </ul>	    </div>	   	    <div class="grid_10 prefix_1 suffix_1" id="bannerContainer">		 <img src="img/banner.jpg" style="width:100%" alt="" />	    </div>	   	    <div class="grid_10 prefix_1 suffix_1" id="subNavContainer">			    <ul id="subNavList">				    <a href="#"><li>Featured</li></a>				    <a href="#"><li>Most Popular</li></a>				    <a href="#"><li>Recently Added</li></a>			    </ul>	  	    </div>	   	    <div class="grid_5 prefix_1" id="leftMenu">		 <div class="showContainer" id="jayLeno">			 <img src="img/1.jpg" alt="showImg" id="jayLeno" class="showImg" />			    <h1>The Tonight Show with Jay Leno</h1>			    <h2>Mon, Nov 21, 2011</h2>			    <h2>Season 20 : Ep. 4150 (42:25)</h2>		    </div>		    <div class="showContainer" id="modernFamily">			 <img src="img/2.jpg" alt="showImg" id="modernFamily" class="showImg" />			    <h1>Modern Family</h1>			    <h2>Punkin Chunkin</h2>			    <h2>Season 3 : Ep. 9 (21:30)</h2>		    </div>		    <div class="showContainer" id="upAllNight">			 <img src="img/3.jpg" alt="showImg" id="upAllNight" class="showImg" />			    <h1>Up All Night</h1>			    <h2>Week Off</h2>			    <h2>Season 1 : Ep. 10 (21:50)</h2>		    </div>		    <div class="showContainer" id="fringe">			 <img src="img/4.jpg" alt="showImg" id="fringe" class="showImg" />			    <h1>Fringe</h1>			    <h2>Wallflower</h2>			    <h2>Season 4 : Ep. 7 (43:35)</h2>		    </div>	    </div>	    <div class="grid_5 suffix_1" id="rightMenu">		 <div class="showContainer" id="newGirl">			 <img src="img/5.jpg" alt="showImg" id="newGirl" class="showImg" />			    <h1>New Girl</h1>			    <h2>Thanksgiving</h2>			    <h2>Season 1 : Ep. 6 (21:43)</h2>		    </div>		    <div class="showContainer" id="revenge">			 <img src="img/6.jpg" alt="showImg" id="revenge" class="showImg" />			    <h1>Revenge</h1>			    <h2>Suspicion</h2>			    <h2>Season 1 : Ep. 9 (43:09)</h2>		    </div>		    <div class="showContainer" id="saturdayNight">			 <img src="img/7.jpg" alt="showImg" id="saturdayNight" class="showImg" />			    <h1>Saturday Night Live</h1>			    <h2>Jason Segel</h2>			    <h2>Season 37 : Ep. 7 (1:05:50)</h2>		    </div>		    <div class="showContainer" id="americanDad">			 <img src="img/8.jpg" alt="showImg" id="americanDad" class="showImg" />			    <h1>American Dad!</h1>			    <h2>The Worst Stan</h2>			    <h2>Season 7 : Ep. 4 (21:53)</h2>		    </div>	    </div> 	     </div>       <div id="changingContentContainer">	 <div id="changingContent">	 </div>	    <div id="changingContentButtons">		    <a href="#"><div id="watchNowButton">		    <img src="img/play.jpg" alt="" />		    <h2>Watch Now</h2>		    </div></a>		    <a href="#"><div id="queueButton">		    <img src="img/add.jpg" alt="" />		    <h2>Add to Queue</h2>		    </div></a>		    <a href="#"><div id="showPageButton">		    <img src="img/goTo.gif" alt="" />		    <h2>Go to Show Page</h2>		    </div></a>		 </div></div></body></html>

[Ingolme]

Oh, one moment, are you executing that code before the body tag? You have to add the event after the body element gets created.

[Caitlin-havener]

Oh, after load event!? Sorry newb here

[Caitlin-havener]

I put it in function after load event and its still alerting null

function init(){var page = document.getElementsByTagName('div');var pageTitle = page[0].getAttribute('id');document.body.addEventListener('click', infoBanner, false);if (pageTitle == 'QueuePage'){  var newGirlQueue= document.getElementById('newGirlQueue');  newGirlQueue.addEventListener('click', clickQueue, false);  var allTitlesQueue = document.getElementById('allTitlesQueue');  allTitlesQueue.addEventListener('click',clickQueue, false);  var upAllNightQueue = document.getElementById('upAllNightQueue');  upAllNightQueue.addEventListener('click',clickQueue, false);  var desperateQueue = document.getElementById('desperateQueue');  desperateQueue.addEventListener('click',clickQueue, false);}if(pageTitle == 'MainPage'){  var jayLenoAnchor = document.getElementById('jayLeno');  jayLenoAnchor.addEventListener('click', infoBanner, false);  var modernFamilyAnchor = document.getElementById('modernFamily');  modernFamilyAnchor.addEventListener('click', infoBanner, false);  var upAllNightAnchor = document.getElementById('upAllNight');  upAllNightAnchor.addEventListener('click', infoBanner, false);  var fringeAnchor = document.getElementById('fringe');  fringeAnchor.addEventListener('click', infoBanner, false);  var newGirlAnchor = document.getElementById('newGirl');  newGirlAnchor.addEventListener('click', infoBanner, false);  var revengeAnchor = document.getElementById('revenge');  revengeAnchor.addEventListener('click', infoBanner, false);  var saturdayNightAnchor = document.getElementById('saturdayNight');  saturdayNightAnchor.addEventListener('click', infoBanner, false);  var americanDadAnchor = document.getElementById('americanDad');  americanDadAnchor.addEventListener('click', infoBanner, false);} }window.addEventListener('load', init, false);

[dsonesuk]

You are heading for major incompatibility browser problems here IE recognises 'addEvent' and 'click' Other browsers 'addEventListener' and 'onclick' for cross browser compatibility use

jayLenoAnchor.onclick=function(){rest of code here}

[Caitlin-havener]

Ugh.. I have to follow what my teacher is showing us. He doesn't want us using other methods. Not sure why..

[thescientist]

well, at the very least if you have to use the DOM API, you should use (or at least address addEvent as the backup for handling IE), just as one has to handle dual XHR implementations.

[dsonesuk]

Depending on browser you have to change either 'addEventListener' Or 'click' as none of these will allow the script to work in either browser at present, OR use code to adjust to correct method for specific browsers.

[Ingolme]

addEventListener does use "click" and not "onclick". Internet Explorer uses attachEvent, and takes "onclick" as the first parameter. addEventListener() is the W3C recommendation, so I am not surprised that it's what they teach at schools. The advantage with addEventListener(), that you can't get by using element.onclick, is the ability to add multiple functions to the click event without interfering with any functions that are already there.

[thescientist]

https://developer.mozilla.org/en/DOM/element.addEventListener

[Caitlin-havener]

I'm going to totally ignore IE for this assignment, lol. The addEventListener and click are working for the img and div elements. I just cant get it to work for the body or document. I just need to be able to call a function when anywhere is clicked on the page that isnt an element that I have already specified an event listener for. The function will then just make whatever windows the script created go away (not sure how to do that either). Thanks 'the scientist' I read the page but I'm just getting more confused. This ought to be simple Per specification I cannot use the following: You may not use any JavaScript libraries or any piece of a JavaScript tutorialpresented outside of lectures and/or labs in this course-­‐ You may not use the innerHTML property anywhere in this assignment-­‐ You may not use the XMLHttpRequest object or any browser-specific variation of it-­‐ You should only use unobtrusive JavaScript, and no JavaScript should appear inyour HTML outside of the <head> element-­‐ Event Listeners should be used instead of Event Handlers

[Caitlin-havener]

Was thinking I would just set the object to hidden

[thescientist]

do you have a live demo of this somewhere that could get a link too?

[Caitlin-havener]

So I've tried the following. I am getting the click anywhere to work I think but now it overrides what is supposed to happen when you click other elements I have on the page. Not getting any errors Both after page loads: var theBody= document.getElementsByTagName('body');theBody[0].addEventListener('click', anywhereElse, false); OR document.addEventListener('click', anywhereElse, false);

[Caitlin-havener]

http://dm.ucf.edu/~ca081919/dig3716c/assignment3/main.html Click the shows

[Caitlin-havener]

You can see a window opens up when you click the shows. I just want it to go away when you click somewhere else on the page LOL

[thescientist]

for the case where it hides the the window but doesn't allow for other click events, try setting the third paramter to true. I believe setting it to this will allow for event bubbling. i.e.

var theBody= document.getElementsByTagName('body');theBody[0].addEventListener('click', anywhereElse, true);

[dsonesuk]

Then In theory you should be able to just use window.addEventListener('click', anywhereElse, true);

[Caitlin-havener]

Kay Ill try that

[Caitlin-havener]

Omg, I love you guys. It works!

[Caitlin-havener]

Okay I have another issue... hopefully I won't get your brain in a pretzel because mine sure is. I don't know where to place the following array assignment:

for (i=1; i<=5; i++){	 newGirlAnchor=new Array();	 newGirlAnchor[i]= getElementById('img/newgirl/newgirl_0' + i + '.jpg');	 newGirlAnchor[i].addEventListener('click', infoBanner, false);	 upAllNightAnchor=new Array();	 upAllNightAnchor[i]= getElementById('img/upallnight/upallnight_0' + i + '.jpg');	 upAllNightAnchor[i].addEventListener('click', infoBanner, false);	 desperateAnchor=new Array();	 desperateAnchor[i]= getElementById('img/desperateAnchor/desperate_0' + i + '.jpg');	 desperateAnchor[i]= addEventListener('click', infoBanner, false);	 console.log(newGirlAnchor[1]);    }

I cannot do it after load event. I have to wait until the left shows are clicked for it to generate Id's for the episode shows (the printQueueList function is completed). http://dm.ucf.edu/~ca081919/dig3716c/assignment3/queue.html Let me clarify:1. Go to the above link.2. Click on the "New Girl" show on the left (or any show on left). 3. When user clicks a show, printQueueList function is called.4. That function generates the list of episodes, as you can see on the right.5. The function also assigns ID's to each episode (I just used the image source for the ID)6. I THEN need to assign the click event listener to each of those episodes via getElementById. ^ FIRST ISSUE: I tried to do this last in the printQueueList function, but it doesn't assign unless I type each variable assignment out instead of the quick way with arrays7. When user clicks on one of the episodes on the right, function infoBanner should be called. Within the function are if statements, the click should then be routed accordingly. ^ SECOND ISSUE: Regardless of where I place the above variable assignments (array), function infoBanner does not recognize the test anchor (ID= img/newgirl/newgirl_01.jpg). As you can see. When first episode is clicked, it should console.log "hey sexy" which it doesn't. You can see what I am trying to do with the episode list on the other page: http://dm.ucf.edu/~ca081919/dig3716c/assignment3/main.html Click an episode, a banner appears. THAT is what I am trying to do on the other page when an episode is clicked! Confused? You can see a couple places that I have tried the assignments where the above code snippet matches what is commented out in the below code. Code below:

// JavaScript Document//MODAL WINDOWS MAIN PAGEfunction infoBannerContent(episodeInfo){console.log(name);  var changingContentDiv = document.getElementById('changingContent');   while(changingContentDiv.hasChildNodes()){   changingContentDiv.removeChild(changingContentDiv.lastChild);  }   var newEpisodeName = document.createElement('h1');  var episodeName = document.createTextNode(episodeInfo[0]);  newEpisodeName.setAttribute('class', 'episodeInfoHeader');  newEpisodeName.appendChild(episodeName);   changingContentDiv.appendChild(newEpisodeName);   var newEpisodeSeasonNumber = document.createElement('h2');  var episodeSeasonNumber = document.createTextNode(episodeInfo[1]);  newEpisodeSeasonNumber.setAttribute('class', 'episodeInfo');  newEpisodeSeasonNumber.appendChild(episodeSeasonNumber);   changingContentDiv.appendChild(newEpisodeSeasonNumber);   var newAirDate = document.createElement('h2');  var airDate = document.createTextNode('Air Date: ' + episodeInfo[2]);  newAirDate.setAttribute('class', 'episodeInfo');  newAirDate.appendChild(airDate);   changingContentDiv.appendChild(newAirDate);   var newRating = document.createElement('h2');  var rating = document.createTextNode('Rated: ' + episodeInfo[3]);  newRating.setAttribute('class', 'episodeInfo');  newRating.appendChild(rating);   changingContentDiv.appendChild(newRating);   var newNetworkStudio = document.createElement('h2');  var networkStudio = document.createTextNode('Network Studio: ' + episodeInfo[4]);  newNetworkStudio.setAttribute('class', 'episodeInfo');  newNetworkStudio.appendChild(networkStudio);   changingContentDiv.appendChild(newNetworkStudio);  var newDescription = document.createElement('h2');  var description = document.createTextNode(episodeInfo[5]);  newDescription.setAttribute('class', 'episodeInfo');  newDescription.appendChild(description);   changingContentDiv.appendChild(newDescription);}function infoBanner(){//switched attribute from name to idvar titleOfCurrentAnchor = this.getAttribute('id');var changingContentContainerDiv = document.getElementById('changingContentContainer');if (titleOfCurrentAnchor == 'jayLeno'){  var episodeInfo= new Array("The Tonight Show with Jay Leno: Mon, Nov 21, 2011","Season 20 : Ep. 4150","11/21/2011","TV-PG","NBC","Dennis Miller, David \& Sean La Vau, Javier Colon.");   infoBannerContent(episodeInfo);   changingContentContainerDiv.style.left = '-10px';  changingContentContainerDiv.style.top = '-650px';  //HOW TO CHANGE BORDER COLOR  document.getElementById('jayLeno').style.borderColor = '#74b928';}else if (titleOfCurrentAnchor == 'modernFamily'){  var episodeInfo= new Array("Modern Family: Punkin Chunkin","Season 3 : Ep.9","11/23/2011","TV-PG","ABC","Jay thinks Manny needs constructive criticism.");  changingContentContainerDiv.style.left = '-10px';  changingContentContainerDiv.style.top = '-500px'; }else if (titleOfCurrentAnchor == 'upAllNight'){  var episodeInfo= new Array("Up All Night : Week Off","Season 1 : Ep. 10","11/23/2011","TV-PG","NBC","Ava struggles to connect with Kevin's daughter while Reagan brings her Type-A behavior home.");  changingContentContainerDiv.style.left = '-10px';  changingContentContainerDiv.style.top = '-400px'; }else if (titleOfCurrentAnchor == 'fringe'){  var episodeInfo= new Array("Fringe : Wallflower","Season 4 : Ep. 7","11/18/2011","TV-14","Fox","The Fringe Team investigates an unknown, genetic disorder.");  changingContentContainerDiv.style.left = '-10px';  changingContentContainerDiv.style.top = '-275px'; }else if (titleOfCurrentAnchor == 'newGirl'){  var episodeInfo= new Array("New Girl : Thanksgiving","Season 1 : Ep. 6","11/15/2011","TV-PG","Fox","Thanksgiving goes awry.");   changingContentContainerDiv.style.left = '-130px';  changingContentContainerDiv.style.top = '-650px'; }else if (titleOfCurrentAnchor == 'revenge'){  var episodeInfo= new Array("Revenge : Suspicion","Season 1 : Ep. 9","11/23/2011","TV-PG","ABC","Realizing she has lost a valuable ally, Emily reaches out to her mentor.");   changingContentContainerDiv.style.left = '-130px';  changingContentContainerDiv.style.top = '-500px'; }else if (titleOfCurrentAnchor == 'saturdayNight'){  var episodeInfo = new Array("Saturday Night Live : Jason Segel","Season 37 : Ep. 7","11/19/2011","TV-14","NBC","Jason Segel hosts Saturday Night Live with musical guest Florence + the Machine!");  changingContentContainerDiv.style.left = '-130px';  changingContentContainerDiv.style.top = '-400px'; }else if (titleOfCurrentAnchor == 'americanDad'){  var episodeInfo = new Array("American Dad! :  The Worst Stan","Season 7 : Ep. 4","11/13/2011","TV-14","Fox","Stan plays best man.");  changingContentContainerDiv.style.left = '-130px';  changingContentContainerDiv.style.top = '-275px';}else if(titleOfCurrentAnchor == 'img/newgirl/newgirl_01.jpg'){  var episodeInfo = new Array("New Girl : Thanksgiving", "Season 1 : Ep. 6", "11/15/2011" , "TV-PG","Fox","Thanksgiving goes awry.");  console.log("hey sexy");  changingContentContainerDiv.style.left = '-130px';  changingContentContainerDiv.style.top = '-275px';}//Queue list episode info goes here//else if{// // }else{  var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'hidden';}changingContentContainerDiv.style.visibility = 'visible';infoBannerContent(episodeInfo);}function printQueueList(currentQueue){var changingContentDiv = document.getElementById('changingContentQueue'); while(changingContentDiv.hasChildNodes()){  changingContentDiv.removeChild(changingContentDiv.lastChild); }for(i=1; i<=episodes.length; i++){   if(episodes[i][1] == currentQueue){    var showDiv = document.createElement('div');    showDiv.setAttribute('class','showDiv');       var newShowImg = document.createElement('img');    newShowImg.setAttribute('src', episodes[i][0]);    newShowImg.setAttribute('class', 'newShowImg');    newShowImg.setAttribute('alt','Episode Thumbnail');    showDiv.appendChild(newShowImg);       var newShow = document.createElement('h1');    var newShowText = document.createTextNode(episodes[i][1]);    newShow.setAttribute('class','queueShowHeader');    newShow.appendChild(newShowText);    showDiv.appendChild(newShow);       var newEpisode = document.createElement('h1');    var newEpisodeText = document.createTextNode(episodes[i][2]);    newEpisode.setAttribute('class','queueEpisodeHeader');    newEpisode.appendChild(newEpisodeText);    showDiv.appendChild(newEpisode);       var newEpisodeNumber = document.createElement('h2');    var newEpisodeNumberText = document.createTextNode(episodes[i][3]);    newEpisodeNumber.setAttribute('class', 'queueEpisodeNumber');    newEpisodeNumber.appendChild(newEpisodeNumberText);    showDiv.appendChild(newEpisodeNumber);    showDiv.setAttribute('id',episodes[i][0]);    var printID = showDiv.getAttribute('id');    changingContentDiv.appendChild(showDiv);   }   else if(currentQueue=='All Titles'){    var showDiv = document.createElement('div');    showDiv.setAttribute('class','showDiv');       var newShowImg = document.createElement('img');    newShowImg.setAttribute('src', episodes[i][0]);    newShowImg.setAttribute('class', 'newShowImg');    newShowImg.setAttribute('alt','Episode Thumbnail');    showDiv.appendChild(newShowImg);       var newShow = document.createElement('h1');    var newShowText = document.createTextNode(episodes[i][1]);    newShow.setAttribute('class','queueShowHeader');    newShow.appendChild(newShowText);    showDiv.appendChild(newShow);       var newEpisode = document.createElement('h1');    var newEpisodeText = document.createTextNode(episodes[i][2]);    newEpisode.setAttribute('class','queueEpisodeHeader');    newEpisode.appendChild(newEpisodeText);    showDiv.appendChild(newEpisode);       var newEpisodeNumber = document.createElement('h2');    var newEpisodeNumberText = document.createTextNode(episodes[i][3]);    newEpisodeNumber.setAttribute('class', 'queueEpisodeNumber');    newEpisodeNumber.appendChild(newEpisodeNumberText);    showDiv.appendChild(newEpisodeNumber);    showDiv.setAttribute('id',episodes[i][0]);    changingContentDiv.appendChild(showDiv);      }  } /*for (i=1; i<=5; i++){	 newGirlAnchor=new Array();	 newGirlAnchor[i]= getElementById('img/newgirl/newgirl_0' + i + '.jpg');	 newGirlAnchor[i].addEventListener('click', infoBanner, false);	 upAllNightAnchor=new Array();	 upAllNightAnchor[i]= getElementById('img/upallnight/upallnight_0' + i + '.jpg');	 upAllNightAnchor[i].addEventListener('click', infoBanner, false);	 desperateAnchor=new Array();	 desperateAnchor[i]= getElementById('img/desperateAnchor/desperate_0' + i + '.jpg');	 desperateAnchor[i]= addEventListener('click', infoBanner, false);	 console.log(newGirlAnchor[1]);    }*/}function clickQueue(){var titleOfCurrentAnchor = this.getAttribute('id');if (titleOfCurrentAnchor == 'newGirlQueue'){  var currentQueue = 'New Girl';  printQueueList(currentQueue);}else if(titleOfCurrentAnchor == 'allTitlesQueue'){  var currentQueue = 'All Titles';  var allTitlesQueue = document.getElementById('allTitlesQueue');  allTitlesQueue.style.backgroundColor='gray';  printQueueList(currentQueue);}else if(titleOfCurrentAnchor == 'upAllNightQueue'){  var currentQueue = 'Up All Night';  printQueueList(currentQueue);}else if(titleOfCurrentAnchor == 'desperateQueue'){  var currentQueue = 'Desperate Housewives';  printQueueList(currentQueue);}}function anywhereElse(){var changingContentContainerDiv = document.getElementById('changingContentContainer');  changingContentContainerDiv.style.visibility = 'hidden';}function init(){var page = document.getElementsByTagName('div');var pageTitle = page[0].getAttribute('id');//document.body.addEventListener('click', infoBanner, false);var theBody= document.getElementsByTagName('body');theBody[0].addEventListener('click', anywhereElse, true);if (pageTitle == 'QueuePage'){  var newGirlQueue= document.getElementById('newGirlQueue');  newGirlQueue.addEventListener('click', clickQueue, false);  var allTitlesQueue = document.getElementById('allTitlesQueue');  allTitlesQueue.addEventListener('click',clickQueue, false);  var upAllNightQueue = document.getElementById('upAllNightQueue');  upAllNightQueue.addEventListener('click',clickQueue, false);  var desperateQueue = document.getElementById('desperateQueue');  desperateQueue.addEventListener('click',clickQueue, false);   /*for (i=1; i<=5; i++){   var newGirlAnchor=new Array();   newGirlAnchor[i]= getElementById('img/newgirl/newgirl_0' + i + '.jpg');   newGirlAnchor[i].addEventListener('click', infoBanner, false);   var upAllNightAnchor=new Array();   upAllNightAnchor[i]= getElementById('img/upallnight/upallnight_0' + i + '.jpg');   upAllNightAnchor[i].addEventListener('click', infoBanner, false);   var desperateAnchor=new Array();   desperateAnchor[i]= getElementById('img/desperateAnchor/desperate_0' + i + '.jpg');   desperateAnchor[i]= addEventListener('click', infoBanner, false);  }*/}if(pageTitle == 'MainPage'){  var jayLenoAnchor = document.getElementById('jayLeno');  jayLenoAnchor.addEventListener('click', infoBanner, false);  var modernFamilyAnchor = document.getElementById('modernFamily');  modernFamilyAnchor.addEventListener('click', infoBanner, false);  var upAllNightAnchor = document.getElementById('upAllNight');  upAllNightAnchor.addEventListener('click', infoBanner, false);  var fringeAnchor = document.getElementById('fringe');  fringeAnchor.addEventListener('click', infoBanner, false);  var newGirlAnchor = document.getElementById('newGirl');  newGirlAnchor.addEventListener('click', infoBanner, false);  var revengeAnchor = document.getElementById('revenge');  revengeAnchor.addEventListener('click', infoBanner, false);  var saturdayNightAnchor = document.getElementById('saturdayNight');  saturdayNightAnchor.addEventListener('click', infoBanner, false);  var americanDadAnchor = document.getElementById('americanDad');  americanDadAnchor.addEventListener('click', infoBanner, false);} }window.addEventListener('load', init, false);//window.addEventListener('click', infoBanner, true);var episodes = new Array();  episodes[1]= new Array("img/newgirl/newgirl_01.jpg", "New Girl", "Thanksgiving", "Season 1 : Ep. 6");  episodes[2]= new Array("img/newgirl/newgirl_02.jpg", "New Girl", "CeCe Crashes", "Season 1 : Ep. 5");  episodes[3]= new Array("img/newgirl/newgirl_03.jpg", "New Girl", "Naked", "Season 1 : Ep. 4");  episodes[4]= new Array("img/newgirl/newgirl_04.jpg", "New Girl", "Wedding", "Season 1 : Ep. 3");  episodes[5]= new Array("img/newgirl/newgirl_05.jpg", "New Girl", "Kryptonite", "Season 1 : Ep. 2");  episodes[6]= new Array("img/upallnight/upallnight_01.jpg", "Up All Night", "Week Off", "Season 1 : Ep. 10");  episodes[7]= new Array("img/upallnight/upallnight_02.jpg", "Up All Night", "Hiring and Firing", "Season 1 : Ep. 9");  episodes[8]= new Array("img/upallnight/upallnight_03.jpg", "Up All Night", "First Night Away", "Season 1 : Ep. 8");  episodes[9]= new Array("img/upallnight/upallnight_04.jpg", "Up All Night", "Parents", "Season 1 : Ep. 7");  episodes[10]= new Array("img/upallnight/upallnight_05.jpg", "Up All Night", "Birth", "Season 1 : Ep. 6");  episodes[11]= new Array("img/desperate/desperate_01.jpg", "Desperate Housewives", "Suspicion Song", "Season 8 : Ep. 8");  episodes[12]= new Array("img/desperate/desperate_02.jpg", "Desperate Housewives", "Always in Control", "Season 8 : Ep. 7");  episodes[13]= new Array("img/desperate/desperate_03.jpg", "Desperate Housewives", "Witch's Lament", "Season 8 : Ep. 6");  episodes[14]= new Array("img/desperate/desperate_04.jpg", "Desperate Housewives", "The Art of Making Art", "Season 8 : Ep. 5");  episodes[15]= new Array("img/desperate/desperate_05.jpg", "Desperate Housewives", "School of Hard Knocks", "Season 8 : Ep. 4");