CODEWITHSUNDEEP
javascripthtmlresetaddeventlistener
Pappy
Pappy

Reputation: 129

How to reset with an eventListener in Javascript

i have this assignment running good but stuck on where i have to reset values. i have tried .removeEventListener which doesn't work the way i want it and also i don't wanna reload the page. Below are my codes...

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);
      }               
});

Below is where i wanna write my reset codes... i want the distributed players to be removed when reset is clicked... 

document.getElementById("reset").addEventListener("click", function() 
{



});

Upvotes: 2

Views: 9294

Answers (2)

Ferenc
Ferenc

Reputation: 141

Removing the event listener will not change the DOM tree itself. You can either populate it using an id and use 

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

but then you need to keep track of "yourId" when creating it. -In case you will need this value later it could make sense.

OR you can simply clear the content:

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

but in that case make it nicer and move the id to a div in html:

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

and then use:

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

Upvotes: 1

user2968189
user2968189

Reputation: 81

Here is the doc of element.removeEventListener

Try to pass a named function (not an anonymous one) to addEventListener and 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);

Upvotes: 2

Related Questions