How to modularize code while creating HTML elements in JavaScript?

I am writing a piece of code to basically call in the top money earner and the top five money earners in a given data set. While writing the code, I realized that there were a couple of spots where I was rewriting the code, basically copying and pasting it. While that works, I wanted to throw the duplicate portion of the code and call it from a function. However, that is not working and I don’t exactly know why. Here is the code that is duplicated:

for (let i = 0; i < len; i++) {
    html +=
      '<li class="top">' +
      '<h2>' +
      topSalaries[i][8] +
      '</h2>' +
      '<h3>' +
      topSalaries[i][11] +
      '</h3>';
  }

  container.innerHTML = '<ul id = "topSalaries">' + html + '</ul>';

Here is the function I made to be called. However, when I call it, it’s not working as expected, where the information shows up on the webpage. I’m using VS Code and am running this on live server so when I save, the webpage automatically updates.

function createHtmlElements(len, html) {
  for (i = 0; i < len; i++) {
    html +=
      '<li class="top">' + 
      '<h2>' + 
      topFiveSalaries[i][8] + 
      '</h2>' + 
      '<h3>' + 
      topFiveSalaries[i][11] +
      '</h3>' +
      '</li>';
  }

  return html
}

function getTopSalaries(boston, container) {
  const people = boston.data;
  const len = 5; // only want top five
  let topFiveSalaries = sortPeople(people).slice(0,len);

  // create the list elements
  html = createHtmlElements(len, html);
  container.innerHTML = '<ul id = topSalaries">' + html + '</ul>';
}

Answer

For one thing topFiveSalaries is going to be undefined in the function createHtmlElements you’ve created, you must pass it to the function

Advertisement

Answer