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 Previews and Snapshots

Posted by Arielle Anthony
.a{fill-rule:evenodd;}techdegree
Arielle Anthony
Full Stack JavaScript Techdegree Student 7,081 Points

Why is everything displayed as "undefined"? 

let html = '';

for (i = 0; i <= pets.length; i++ ) {
  html = `
        <h2>${pets.name}</h2>
        <h3>${pets.type} | ${pets.breed}</h3> 
        <p>${pets.age}</p>
        <img src="${pets.photo}" alt="${pets.name}">
        `;
}

document.querySelector('main').innerHTML = html;

What am I missing here?

1 Answer

Robert Manolis
STAFF
Robert Manolis
Treehouse Guest Teacher
Robert Manolis
Robert Manolis
Treehouse Guest Teacher

Hey Arielle Anthony , looks like everything is undefined for two reasons. First, you're looping one too many times, so on the final iteration, there's no pet to get info from. And second, you're overwriting the html variable on each iteration.

To fix this, change the operator in the loop condition from less than or equal to, <=, to just less than, <. And in the body of the loop, instead of html = do this: html +=.

Hope that helps. :smiley: