数组不使用javascript中的array.from生成

我已经启动了一个抽奖应用程序，我有一些麻烦。我正在把它转换成ES6，在这条线路上的某个地方，我可能把事情搞砸了

目前的最终目标只是在屏幕上显示一组带有标题的图片。标题来自names数组，显示良好，但图像根本不显示，我在控制台中也没有发现错误

我给我的图像命名的方式可以通过team0、team1、team2等进行迭代。名称来自文本区域，数字数组是根据名称数组的长度创建的，应该用数字填充，但根本不填充，这导致我正在制作的img标记没有来源，也不显示图像。因此，如果my names数组中有两个名称，那么数字数组应该是[0,1]。以下是这个问题的重点。然后是整个代码

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);

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 a numbers array that is the same length as the names array, for indexing.



var textarea = document.querySelector('textarea');

// save names without submitting
function saveNames() {
  names = textarea.value.split('\n');
}
// save names to array, no submit button
textarea.addEventListener('blur', saveNames, false);


// shuffle arrays
function shuffle(a) {
  for (let i = 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);
});

这是最有效的方法吗？这是我的全部代码

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);

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 a numbers array that is the same length as the names array, for indexing.



var textarea = document.querySelector('textarea');

// save names without submitting
function saveNames() {
  names = textarea.value.split('\n');
}
// save names to array, no submit button
textarea.addEventListener('blur', saveNames, false);


// shuffle arrays
function shuffle(a) {
  for (let i = 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);
});

---

您的代码中有一些错误。首先，e.targetId从来不是棒球或足球，它总是展示。这是因为单击显示id的元素时会执行该函数。我假设您想查看是否选中了该复选框。在这种情况下，请将if语句更改为：

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";
         }

另一件事是上面提到的，这是定义数字数组的地方。将其放入saveNames函数，如下所示：

function saveNames() {
  names = textarea.value.split('\n');
  numbers = Array.from({length:names.length}).map((_,i)=>i); //creates a numbers array that is the same length as the names array, for indexing.
}

然后在你最初定义它的地方放上

var numbers;

另一件事——我不能根据代码的其余部分说，但对我来说，数字数组似乎是多余的，即数字[I]将始终与我本身相同。如果您想摆脱这个问题，那么不必费心定义数字数组，只需将数字[i]替换为i:

---

注意：如果您想知道，这是基于您最初在问题中输入的HTML，但似乎您删除了它。

由于名称是空的，数字数组不是总是空的吗？你应该从存储名内部执行数组，对吗？这很有意义。。。我试过这个，它终于填满了。非常感谢。另外，您真的需要数字数组吗？如果你只是使用它来设置img src，你可以简单地使用i.@dork这就是我所想的，尽管他们可能在他们的程序中的其他地方使用它，python风格…谢谢你的回答，在我意识到检查单选按钮是否更有意义后，我实际上实施了你提到的所有这些更改。在我开始转换东西之前，当我将单选按钮作为常规按钮保留时，其中一些代码是旧代码。我删除了HTML代码。@user2247061只是出于兴趣。你还需要数字数组做其他事情吗？或者你可以只使用i吗？目前我在其他任何地方都不使用它，尽管该应用程序还没有真正完成，所以我还不确定，稍后将进一步扩展。我还没有试着只用I，但你是对的，这是多余的。