如何在 Javascript 中使用 eventListener 进行重置

Question

我有这个作业运行很好，但卡在我必须重置值的地方。我已经尝试过 .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() 
{



});

Answer 1

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

Answer 2

删除事件侦听器不会更改 DOM 树本身。您可以使用 id 填充它并使用

document.removeChild(document.getElementById("yourId"))

但是您需要在创建它时跟踪 "yourId"。 - 如果您以后需要这个值，它可能有意义。

或您可以简单地清除内容：

document.getElementById("forward-one").innerHTML = "<p id='forward-one'><span>Forward:</span></p>";

但在那种情况下让它变得更好并将 id 移动到 html 中的 div:

<p><span>Forward:</span><div id="forward-one">Apa, www</div></p>

然后使用：

document.getElementById("forward-one").innerHTML = "";

如何在 Javascript 中使用 eventListener 进行重置

How to reset with an eventListener in Javascript

javascript

html

reset

addeventlistener