function createContent() {
  const mainContent = document.querySelector("#content");
  return mainContent;
}

function renderSite() {
  createContent();
  mainContent.appendChild(createHeader());
  mainContent.appendChild(createMain());
}

Whenever I run renderSite, I get an error telling me mainContent is not defined. I can fix this by adding mainContent manually to renderSite. But why am I unable to return mainContent when calliing createContent() from renderSite()?

CodePudding user response：

mainContent is in the createContent() function scope. If you want to use it this way, you need not just to run it, but assign the result of function execution like that:

function renderSite() {
  const mainContent = createContent();
  mainContent.appendChild(createHeader());
  mainContent.appendChild(createMain());
}