Build an fCC Authors Page - Step 18

JavaScript
1

Tell us what’s happening:

My solution yields the expected results, but it doesn’t pass the test. Does this happen because I’m trying to call the function, instead of simply using it as the callback function for the event listener?

I’ve found the correct solution, but wanted to know why this happens anyways.

/* file: script.js */
const authorContainer = document.getElementById('author-container');
const loadMoreBtn = document.getElementById('load-more-btn');

let startingIndex = 0;
let endingIndex = 8;
let authorDataArr = [];

fetch('https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json')
  .then((res) => res.json())
  .then((data) => {
    authorDataArr = data;
    displayAuthors(authorDataArr.slice(startingIndex, endingIndex));  
  })
  .catch((err) => {
    console.error(`There was an error: ${err}`);
  });

const fetchMoreAuthors = () => {
  startingIndex += 8;
  endingIndex += 8;

  displayAuthors(authorDataArr.slice(startingIndex, endingIndex));
};

const displayAuthors = (authors) => {
  authors.forEach(({ author, image, url, bio }, index) => {
    authorContainer.innerHTML += `
    <div id="${index}" class="user-card">
      <h2 class="author-name">${author}</h2>
      <img class="user-img" src="${image}" alt="${author} avatar" />
      <p class="bio">${bio}</p>
      <a class="author-link" href="${url}" target="_blank">${author}'s author page</a>
    </div>
  `;
  });
};


// User Editable Region

loadMoreBtn.addEventListener("click", fetchMoreAuthors())

// User Editable Region
2

yes, this happens because you are calling the function. Meaning the function is called when the page loads, not when the button is clicked.

Also fetchMoreAuthors returns undefined, so now the event listener is trying to call undefined as a function