我的作业运行良好，但卡在必须重置值的地方。我已经尝试过 .removeEventListener ，它不能按我想要的方式工作，而且我也不想重新加载页面。下面是我的代码...
HTML
<!DOCTYPE html>
<html>
<head>
<title>Table Soccer Teams</title>
<link rel="stylesheet" type="text/css" href="soccer.css" />
<script type="text/javascript" src="table_soccer.js" ></script>
</head>
<body>
<a id="reset" href ="#" class="btn" >Reset</a>
<div id="soccer_field">
<div class="players" onsubmit="return(validateForm ());">
<h2>Possible Players</h2>
<ul id="first">
<li class="list-item">Player 1</li>
<li class="list-item">Player 2</li>
<li class="list-item">Player 3</li>
<li class="list-item">Player 4</li>
<li class="list-item">Player 5</li>
<li class="list-item">Player 6</li>
<li class="list-item">Player 7</li>
<li class="list-item">Player 8</li>
</ul>
<p class="three">Click on names above to select player </p>
</div>
<div class="actual_players">
<h3>Actual Players</h3>
<ul id="actual-players" ></ul>
<p class="two">Click button below to generate Teams</p>
<a id="generate" href ="#" class="btn">Click here</a>
</div>
<div class="teams">
<h1>Teams</h1>
<h4>Team 1</h4>
<p id="forward-one"><span>Forward:</span></p>
<p id="defender-one"><span>Defender:</span></p>
<h5>Team 2 </h5>
<p id="forward-two"><span>Forward:</span></p>
<p id="defender-two"><span>Defender:</span></p>
</div>
</div>
</body>
</html>
Javascript
function init(){
var listItems = document.getElementsByClassName("list-item");
for(var i=0; i<listItems.length; i++){
listItems[i].addEventListener("click", function(){
var text = this.innerHTML;
var liElement = document.createElement("LI");
liElement.ClassName = "test";
var text = document.createTextNode(text);
liElement.appendChild(text);
var lis = document.getElementById("actual-
players").getElementsByTagName("li");
if (lis.length == 4){
alert("Don't let more than four players");
} else {
document.getElementById("actual-
players").appendChild(liElement);
this.remove();
}
});
}
document.getElementById("generate").addEventListener("click",
function(){
var temp = [];
var t = document.getElementById("actual-
players").getElementsByTagName("li");
for(var i=0; i<t.length; i++){
temp.push(t[i]);
}
var x = temp.length;
if (x < 4 || x == null) {
alert("Actual players field must not be empty or have less
than 4 players");
return false;
}
var positions = ["forward-one", "defender-one", "forward-two",
"defender-two"];
for (var i = 0; i < 4; i++){
var index = Math.floor(Math.random()*temp.length);
var player = temp[index];
document.getElementById(positions[i]).appendChild(player);
temp.splice(index, 1);
}
});
下面是我想编写重置代码的地方...我希望在单击重置时删除分布式播放器...
document.getElementById("reset").addEventListener("click", function()
{
});
最佳答案
这是 element.removeEventListener 的文档
尝试传递一个命名函数(不是匿名函数)到addEventListener和removeEventListener。
var generate_element = document.getElementById("generate");
var generate_func = function(){...};
generate_element.addEventListener("click",generate_func);
// and later in your code
generate_element.removeEventListener("click",generate_func);
关于javascript - 如何在 Javascript 中使用 eventListener 进行重置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32370456/