JSLint error: don't put functions in a loop

JSLint error: don't put functions in a loop
0.0 0

#1

I need a function to create a string to generate individual list items. I understand I need to make a function expression prior to the loops and call the function within the loop. I guess I’m stumped how to get this to work that way. My code “works” as it is but I’d like to know how to do this “properly”.

Thanks for any advice.

$(document).ready(function() {
  let myList = data[0];

  let legendMaker = function() {
    
  let listMaker = function(i) {
    return "<input type='checkbox' name='check' value='" + myList.indexOf(myList[i]) + "'" + "id='ch" + [i] + "'" + "/><label for='ch" + [i] + "'>" + myList[i] + "<br />";
  };
    
    for (let i = 1; i <= 6; i++) {
      let list0 = function() {
        return "<input type='checkbox' name='check' value='" + myList.indexOf(myList[i]) + "'" + "id='ch" + [i] + "'" + "/><label for='ch" + [i] + "'>" + myList[i] + "<br />";
      };
      $("#legend0").append(list0());
    }

  for (let i = 7; i <= 8; i++) {
    let list1 = function() {
      return "<input type='checkbox' name='check' value='" + myList.indexOf(myList[i]) + "'" + "id='ch" + [i] + "'" + "/><label for='ch" + [i] + "'>" + myList[i] + "<br />";
    };
    $("#legend1").append(list1());
  }

  for (let i = 9; i <= 25; i++) {
    let list2 = function() {
      return "<input type='checkbox' name='check' value='" + myList.indexOf(myList[i]) + "'" + "id='ch" + [i] + "'" + "/><label for='ch" + [i] + "'>" + myList[i] + "<br />";
    };
    $("#legend2").append(list2());
  }

  for (let i = 26; i <= 33; i++) {
    let list3 = function() {
      return "<input type='checkbox' name='check' value='" + myList.indexOf(myList[i]) + "'" + "id='ch" + [i] + "'" + "/><label for='ch" + [i] + "'>" + myList[i] + "<br />";
    };
    $("#legend3").append(list3());
  }

  for (let i = 34; i <= 50; i++) {
    let list4 = function() {
      return "<input type='checkbox' name='check' value='" + myList.indexOf(myList[i]) + "'" + "id='ch" + [i] + "'" + "/><label for='ch" + [i] + "'>" + myList[i] + "<br />";
    };
    $("#legend4").append(list4());
  }
};  

  $(document).on("click", "input", function() {
    let seriesPicker = [];

    $.each($("input[name='check']:checked"), function() {
      seriesPicker.push($(this).val());
    });

#2

It looks like you’re just appending strings — it’s not at all clear why you’re bothering with the extra functions.