javascript - 数组不会在 javascript 中使用 array.from 生成

Question

我已经启动了一个抽奖应用程序(某种)，但我遇到了一些问题。我正在将其转换为 ES6，但在这个过程中我可能搞砸了一些东西。

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

我以可以迭代的方式命名我的图像(team0、team1、team2 等)。名称来自文本区域，数字数组是根据名称数组的长度创建的，应该填充数字，但根本不填充，导致我制作的 img 标签没有源并且不显示图片。所以如果我的名字数组中有 2 个名字，那么数字数组应该是 [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);
});

Answer 1

您的代码中有一些错误。首先，e.targetId 从来都不是棒球或足球，它始终是“显示”。这是因为当单击 id 为“display”的元素时该函数就会执行。我假设您想查看该复选框是否已选中。在这种情况下，请将 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";
         }

另一件事是什么@dork提到的，这是您定义 numbers 数组的地方。将其放入 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;

<小时/>

另一件事 - 我不能根据你的代码的其余部分说，但对我来说 numbers 数组似乎是多余的(即 numbers[i] 将永远是与 i 本身相同)。如果您想摆脱它，那么不必定义 numbers 数组，只需将 numbers[i] 替换为 i:

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

注意:如果您想知道，这是基于您最初在问题中放入的 HTML，但您似乎已将其删除。