html - array does not generate using array.from in javascript -

i have started raffle app (of sorts) i'm having trouble with. converting es6 , somewhere along line may have messed up.

the end goal @ moment display set of pictures captions on screen. captions come names array , display fine, images not show @ , not errors in console.

i named images in way can iterated through (team0, team1, team2, etc). names come textarea , numbers array created based on length of names array , supposed fill numbers not fill @ all, causing img tags i'm making have no source , not display images. if names array had 2 names in it, numbers array should [0,1]. here's lines focus of question. followed whole code.

var names = []; var numbers = array.from({length:names.length}).map((_,i)=>i);      if (e.target.id === "baseball") {            newimg.src = "images/baseball/team" + numbers[i] + ".jpg";          } else if (e.target.id === "football") {            newimg.src = "images/football/team" + numbers[i] + ".gif";          }          tdisplay.appendchild(newdiv); 

is efficient way of doing this? here whole code.

var random = document.getelementbyid("random"); var reset = document.getelementbyid("reset"); var tdisplay = document.getelementbyid("parent"); var bgroup = document.getelementbyid("buttongroup"); var dbtn = document.getelementbyid("display"); var names = []; var numbers = array.from({length:names.length}).map((_,i)=>i); //creates numbers array same length names array, indexing.    var textarea = document.queryselector('textarea');  // save names without submitting function savenames() {   names = textarea.value.split('\n'); } // save names array, no submit button textarea.addeventlistener('blur', savenames, false);   // shuffle arrays function shuffle(a) {   (let = a.length; i; i--) {     let j = math.floor(math.random() * i);     [a[i - 1], a[j]] = [a[j], a[i - 1]];   } }   function newels(e) {   tdisplay.innerhtml = "";   names.foreach(function(name, i) {          var newdiv = document.createelement("div");         var newimg = document.createelement("img");         var username = document.createelement("p");          newdiv.classname = "col-sm-3 col-md-3 col-lg-2"         newdiv.appendchild(newimg);         newdiv.appendchild(username);         username.textcontent = name;          if (e.target.id === "baseball") {                newimg.src = "images/baseball/team" + numbers[i] + ".jpg";              } else if (e.target.id === "football") {                newimg.src = "images/football/team" + numbers[i] + ".gif";              }              tdisplay.appendchild(newdiv);    }); }  // display images before random dbtn.addeventlistener("click", function images(e) {     newels(e); }); 

there few errors in code. first of all, e.targetid never baseball or football, "display". because function executes when element id "display" clicked. assume want see if checkbox checked. in case, change if statement this:

if (document.getelementbyid('baseball').checked) {            newimg.src = "images/baseball/team" + numbers[i] + ".jpg";          } else if (document.getelementbyid('football').checked) {            newimg.src = "images/football/team" + numbers[i] + ".gif";          } 

the other thing @dork mentioned, define numbers array. put in savenames() function so:

function savenames() {   names = textarea.value.split('\n');   numbers = array.from({length:names.length}).map((_,i)=>i); //creates numbers array same length names array, indexing. } 

and top defining put

var numbers; 

---

another thing - can't based on rest of code, me numbers array seems redundant (i.e. numbers[i] same i itself). if want rid of don't bother defining numbers array , replace numbers[i] i:

if (document.getelementbyid('baseball').checked) {            newimg.src = "images/baseball/team" + + ".jpg";          } else if (document.getelementbyid('football').checked) {            newimg.src = "images/football/team" + + ".gif";          } 

note: in case wondering, based on html put in question originally, seems deleted it.