javascript - NBA 选秀乐透在单击按钮后显示数组项目后将其删除

Question

https://jsfiddle.net/7jux5rLx/3/ ？

上面的完整代码

我正在尝试为 8 支球队制作随机 nba 选秀抽签(使用包含 8 个图像的数组)，单击按钮后会显示第 8 顺位球队的图像，然后将其从数组列表中删除，仅留下 7 个剩余的队伍等等。 我不想删除图像，只是当我单击以下 7 个按钮时，该项目作为数组中的一个选项。所以目前我正在尝试使用数组中的 8 个列表图像，以及 8 个按钮，全部编号为 1-8。我希望它类似于 nba 的选秀彩票，所以如果有人有一个包含百分比公式的代码那就太好了。

每支球队获得第一顺位的机会 = 25%、第二顺位 16.4%、第三顺位 16.4%、第四顺位 16.3%、第五顺位 9.4%、第六顺位 6.6%、第七顺位 4.4%、第八顺位选择2.7%， 这就是我现在所拥有的。我似乎甚至无法按下按钮来随机显示一支球队。这是一个幻想联盟，而不是专业网站或任何东西。

function teams() {
  var aTeams = [];
  aTeams[0] = "<img src='http://i.imgur.com/KowPAjR.png' height='100' width='100' alt='cavs'>";

  aTeams[1] = "<img src='http://i.imgur.com/KowPAjR.png' height='100' width='100' alt='suns'>";

  aTeams[2] = "<img src='http://i.imgur.com/KowPAjR.png' height='100' width='100' alt='rockets'>";

  aTeams[3] = "<img src='http://i.imgur.com/KowPAjR.png' height='100' width='100' alt='nuggets'>";

  aTeams[4] = "<img src='http://i.imgur.com/KowPAjR.png' height='100' width='100' alt='celtics'>";

  aTeams[5] = "<img src='http://i.imgur.com/KowPAjR.png' height='100' width='100' alt='raptors'>";

  aTeams[6] = "<img src='http://i.imgur.com/KowPAjR.png' height='100' width='100' alt='thunder'>";

  aTeams[7] = "<img src='http://i.imgur.com/KowPAjR.png' height='100' width='100' alt='warriors'>";
  var rdmTeams = Math.floor(Math.random() * aTeams.length);
  document.getElementById("table").value = aTeams[rdmTeams];
}

Answer 1

https://jsfiddle.net/7jux5rLx/4/

这绝不是完美的。它需要对代码进行一些格式化，但我相信这正是您所要求的。 fiddle 上有您需要的 html。

/*
* Create a listener for a button click
*/
var table = document.getElementById("table");
table.addEventListener('click', function(event) {
    if (event.target.nodeName == "BUTTON") {
        // Get the div corresponding to the button clicked
        var thisPickDiv = document.getElementById(event.target.id.replace("Btn", "Div"));
        var rdmNum = Math.floor(Math.random() * aTeams.length);
        thisPickDiv.innerHTML = aTeams[rdmNum];
        aTeams.splice(rdmNum, 1);
    }
});

图像保留在页面上。我希望这就是您不删除图像的意思。如果没有，这可以通过使用两个数组(一个用于团队，另一个用于 img 源)轻松完成，但我不知道这会给您带来什么好处。