I am trying to Override the event handler of add button to update after clicking on change event button. but the code is not working

document.getElementById("test").addEventListener("click",function(){
  add();		
  document.getElementById("change_event").value="Now change the event";
  document.getElementById("change_event").style.display="block";
});

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

  document.getElementById("test").value="Update";
  document.getElementById("change_event").style.display="none";
  
  document.getElementById("test").addEventListener("click",function(){
      update();		
  });		
});

function add(){
  alert("Add");
}
function update(){
  alert("Update");	
}

<input type="button" value="add" id="test" name="add">
<input type="button" name="change_event" style="display: none" value="change Event" id="change_event">
    	

I am trying to Override the event handler of add button to update after clicking on change event button. but the code is not working

document.getElementById("test").addEventListener("click",function(){
  add();		
  document.getElementById("change_event").value="Now change the event";
  document.getElementById("change_event").style.display="block";
});

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

  document.getElementById("test").value="Update";
  document.getElementById("change_event").style.display="none";
  
  document.getElementById("test").addEventListener("click",function(){
      update();		
  });		
});

function add(){
  alert("Add");
}
function update(){
  alert("Update");	
}

<input type="button" value="add" id="test" name="add">
<input type="button" name="change_event" style="display: none" value="change Event" id="change_event">
    	

when i click on add the add() function will call. when I clicked on Now change the event update button appear and after clicking on update button the update function must be called.

My problem is, update button calls to add() function at very first time. When I click on update then only update() must be called

• javascript

2 Answers 2

When adding events, they are stacking one on another, means you can have more than one click event on same element, so they not overwrite eachother. You must use removeEventListener to first remove previous event and only then assign new one

var eventWithAdd = function(){
    add();      
    document.getElementById("change_event").value="Now change the event";
    document.getElementById("change_event").style.display="block";

}

...

document.getElementById("test")
    .removeEventListener('click', eventWithAdd)
    .addEventListener('click', function () {update()});

What you should use is removeElementListener() to unregister the add() function and register the update() function:

document.getElementById("test").addEventListener("click", eventListenerAdd);
document.getElementById("change_event").addEventListener("click", eventListenerUpdate);

function eventListenerAdd(){
    add();      
    document.getElementById("change_event").value="Now change the event";
    document.getElementById("change_event").style.display="block";

};


function eventListenerUpdate(){
    document.getElementById("test").value="Update";
    document.getElementById("change_event").style.display="none";
    document.getElementById("test").removeEventListener("click", eventListenerAdd);
        document.getElementById("test").addEventListener("click",function(){
            update();       
        });   
};

function add(){
    alert("Add");
}
function update(){
alert("Update");    
}

<input type="button" value="add" id="test" name="add">
<input type="button" name="change_event" style="display: none" value="change Event" id="change_event">

As you can see, you need to add the Eventlisteners as actual functions with a name in order to remove them.