【发布时间】：2016-12-12 15:40:39
【问题描述】：
我正在尝试将其设置为如果单击按钮，则 bestPlayer.available 变为 false，并且 Picked = true。屏幕会显示名称，但是一旦您通过单击按钮选择了最上面的一个，它就会消失，并且一个新的应该会出现在列表中（列表中有七个玩家）。这是我尝试过的代码。请帮忙！
<!DOCTYPE html>
<html>
<head>
<title>The Draft</title>
<link rel="stylesheet" type="text/css" href="Draft Stylesheet.css"/>
</head>
<body>
<div>
<table id="players">
<thead>
<tr>
<th id="rtgH">RTG</th>
<th id="nameH">Player Name</th>
<th id="ovrH">OVR</th>
<th id="posH">POS</th>
<th id="choose">Draft</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td id="p1">Player</td>
<td id="p1ovr">99</td>
<td id="p1pos">PO</td>
<td> <input type="button" onclick="bestPlayer.available = false; picked=true;" value = "draft"> </td>
</tr>
<tr>
<td>2</td>
<td id="p2">Player</td>
<td id="p2ovr">99</td>
<td id="p2pos">PO</td>
</tr>
<tr>
<td>3</td>
<td id="p3">Player</td>
<td id="p3ovr">99</td>
<td id="p3pos">PO</td>
</tr>
<tr>
<td>4</td>
<td id="p4">Player</td>
<td id="p4ovr">99</td>
<td id="p4pos">PO</td>
</tr>
<tr>
<td>5</td>
<td id="p5">Player</td>
<td id="p5ovr">99</td>
<td id="p5pos">PO</td>
</tr>
<tr>
<td>6</td>
<td id="p6">Player</td>
<td id="p6ovr">99</td>
<td id="p6pos">PO</td>
</tr>
<tr>
<td>7</td>
<td id="p7">Player</td>
<td id="p7ovr">99</td>
<td id="p7pos">PO</td>
</tr>
</tbody>
</thead>
</table>
</div>
<script>
var picked = false;
var round = 1;
var pick = 1;
var first = true;
function comp(b, a) {
return a.overall - b.overall;
}
var players = [{
name: "Pat Moran",
overall: 67,
position: "AP",
available: true
}, {
name: "Peter Webb",
overall: 81,
position: "AP",
available: true
}, {
name: "Ramiro Ramirez",
overall: 74,
position: "AP",
available: true
}, {
name: "Manuel Knight",
overall: 68,
position: "RP",
available: true
}, {
name: "Allan Alexander",
overall: 71,
position: "RP",
available: true
}, {
name: "Gerald Bowman",
overall: 81,
position: "RP",
available: false
}, {
name: "Owen Day",
overall: 78,
position: 3,
available: true
}, {
name: "Jean Ford",
overall: 70,
position: 3,
available: false
}, {
name: "Guy Curtis",
overall: 59,
position: 3,
available: true
}, {
name: "Dallas Diaz",
overall: 68,
position: 4,
available: false
}, {
name: "Jesus Brooks",
overall: 70,
position: 4,
available: true
}, {
name: "Todd Beck",
overall: 76,
position: 4,
available: false
}, {
name: "Steve Cortez",
overall: 66,
position: 5,
available: true
}, {
name: "Toby Caldwell",
overall: 64,
position: 5,
available: false
}, {
name: "Seth Bradley",
overall: 73,
position: 5,
available: true
}, {
name: "Lawrence McCarthy",
overall: 67,
position: 6,
available: false
}, {
name: "Gerardo Marsh",
overall: 77,
position: 6,
available: true
}, {
name: "Alvin Nash",
overall: 78,
position: 6,
available: false
}];
function checkAvailabilty(obj) {
return !!obj.available;
}
var findBestPlayer = (function(arr) {
// a copy of the original data is made.
var data = arr.slice(0);
// sort the data with a comparator function
data.sort(comp);
// filter out the unavailable players.
data = data.filter(checkAvailabilty);
return function(index) {
return data[index];
}
})(players);
if(picked === true || first === true) {
bestPlayer = findBestPlayer(0);
bestPlayerTwo = findBestPlayer(1);
bestPlayerThree = findBestPlayer(2);
bestPlayerFour = findBestPlayer(3);
bestPlayerFive = findBestPlayer(4);
bestPlayerSix = findBestPlayer(5);
bestPlayerSeven = findBestPlayer(6);
first = false;
picked = false;
}
document.getElementById("p1").innerHTML = bestPlayer.name;
document.getElementById("p1ovr").innerHTML = bestPlayer.overall;
document.getElementById("p1pos").innerHTML = bestPlayer.position;
document.getElementById("p2").innerHTML = bestPlayerTwo.name;
document.getElementById("p2ovr").innerHTML = bestPlayerTwo.overall;
document.getElementById("p2pos").innerHTML = bestPlayerTwo.position;
document.getElementById("p3").innerHTML = bestPlayerThree.name;
document.getElementById("p3ovr").innerHTML = bestPlayerThree.overall;
document.getElementById("p3pos").innerHTML = bestPlayerThree.position;
document.getElementById("p4").innerHTML = bestPlayerFour.name;
document.getElementById("p4ovr").innerHTML = bestPlayerFour.overall;
document.getElementById("p4pos").innerHTML = bestPlayerFour.position;
document.getElementById("p5").innerHTML = bestPlayerFive.name;
document.getElementById("p5ovr").innerHTML = bestPlayerFive.overall;
document.getElementById("p5pos").innerHTML = bestPlayerFive.position;
document.getElementById("p6").innerHTML = bestPlayerSix.name;
document.getElementById("p6ovr").innerHTML = bestPlayerSix.overall;
document.getElementById("p6pos").innerHTML = bestPlayerSix.position;
document.getElementById("p7").innerHTML = bestPlayerSeven.name;
document.getElementById("p7ovr").innerHTML = bestPlayerSeven.overall;
document.getElementById("p7pos").innerHTML = bestPlayerSeven.position;
</script>
</body>
</html>
【问题讨论】：
-
我不确定出了什么问题。当我单击草稿按钮时，没有任何反应。控制台也没有错误。
-
能否请您将此代码转换为 jsfiddle 以帮助我们帮助您？
标签： javascript html arrays var