Dear experts,

I would like to implement a API of Javascript that sort of resemble a light switch.

For instance, there are two buttons on the actual HTML page act as the UI.

Both of the buttons have event handlers that invokes a different function.

Each function have codes that act like a state, for instance.

button1.onclick=function (){
   $("div").click(
        //code effects 2
   )
}

button2.onclick=function (){
   $("div").click(
        //Code effects 2
   )
}

I the code works fine on the surface but the 2 state functions overlap.

the effects is going to take place for the rest of the way until the next reload of the document.

Basically what I want to achieve is that when 1 button is clicked, it will switch "OFF" the state of function invoked by the other button and vice versa.

Thus, the effects achieved are unique are not overlapped.

Is there anyway to achieve this or could any experts point me to the right direction.

Thanks in advance.