html and loop

Question

I think the html variable should be declared before the loop and then a string should be build up by adding next card each time the loop runs.

let html = "";
    for(let i = 0; i < array.length; i++){
        // 7-b. Inside, create a conditional checking if `i` is...
        if(i >= start && i <= end){  //      - greater than or equal to the start variable
            html += `
                <div class="author-card">
                  <div class="card-header">
                    <img src="${array[i].image}" alt="photo of ${array[i].name}" />
                  </div>
                  <div class="card-content">
                    <h2 class="title">${array[i].name}</h2>
                    <p>
                      ${array[i].text}
                    </p>
                  </div>
                </div> 
            `;
        }
    }
authorContainer.insertAdjacentHTML("beforeend", html);

... and then add newly created string to the index.html Is it not what we were tought? Which way is better?

Answer 1 · 2024-09-10T14:43:33Z

September 10, 2024 2:43pm

Did you try this? You should have noticed that it displayed many duplicate cards, since the insertAdjacentHTML method appends the current code to page and this code change also appends the card codes inside the html variable.

It would, however, work if you also modify the later code to make it replace the page content instead of adding to it. Then the accumulation would still occur in just one place, but now in the variable instead of on the page. Both methods are equally effective at getting the job done.

There's rarely only one way to accomplish a particular task, and the fact that you're thinking of alternative strategies is evidence of your learning progress and grasp of the material.

Welcome to the Treehouse Community

Looking to learn something new?

Piotr Manczak

Piotr Manczak

html and loop

1 Answer

Steven Parker

Steven Parker