Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Object-Oriented JavaScript (2015) Constructor Functions and Prototypes Making the UI Work

Steve Fielding
Steve Fielding
7,287 Points
Posted by Steve Fielding
Steve Fielding
7,287 Points

Songs not Displaying

My songs are not displaying in the browser. And yes i have debugged it in the developer console. No error found. http://port-80-5gpr7m568u.treehouse-app.com

Joseph Wasden
Joseph Wasden
20,406 Points
Joseph Wasden
Joseph Wasden
20,406 Points

That is very strange. Looking at the code, the <li> items aren't showing in the ordered list. Could you copy and paste your index.html code from Workspaces so that we can confirm if they are indeed written in your code? it should look something like this.

<ol id="playlist">
  <li>Here Comes the Sun - The Beatles<span class="duration">2:54</span></li>
  <li>Here Comes the Moon - The Deatles<span class="duration">2:54</span></li>
  </ol>

If the <li> tags are missing, simply add them. if they are already there, then this will take some more digging.

2 Answers

Steve Fielding
Steve Fielding
7,287 Points
Steve Fielding
Steve Fielding
7,287 Points

Hi Joseph, Since i am using javascript script from song, playlist and app.js to load the songs into the html page with document.getElementid("playlist"), i deleted the

<li>Here Comes the Sun - The Beatles<span class="duration">2:54</span></li>
<li>Here Comes the Moon - The Deatles<span class="duration">2:54</span></li>

and add it to song.js

<!DOCTYPE html>
<html>
<head>
    <title>Treetunes</title>
    <link rel="stylesheet" href="style.css"/>
</head>

<body>

    <div>
        <h1>Treetunes</h1>

        <ol id="playlist">
        </ol>
        <button id="play">Play</button>
        <button id="next">Next</button>
        <button id="stop">Stop</button>

    </div>

    <script src="playlist.js"></script>
    <script src="meida.js"></script>
    <script src="song.js"></script>
    <script src="app.js"></script>

</body>

</html>

song.js

function Song(title,artist,duration) {
         var song = this;
         media.call(song,title,duration);
         this.artist    = artist;
         this.isPlaying =  false;
}
Song.prototype.toHTML = function() {
      var htmlString = '<li';
      htmlString += 'class="current"';
      htmlString += '>';
      htmlString += this.title;
      htmlString +=' - ';
      htmlString += this.artist;
      htmlString +='<span class="duration">';
      htmlString += this.duration;
      htmlString += '</span></li>';
      return htmlString;
};
Joseph Wasden
Joseph Wasden
20,406 Points
Joseph Wasden
Joseph Wasden
20,406 Points

I commented too soon. I should have finished rewatching the video. :)

Could you also share your other .js files? (playlist.js, app.js)

Sebastian Karg
Sebastian Karg
28,705 Points
Sebastian Karg
Sebastian Karg
28,705 Points

Hey Molayo;

I got the same problem but could fix it by opening the console in my preview window, looking at the displayed errors, and correcting some typos in my code. Hope that will also help you.

Grettings, Sebastian