How to make a boolean/toggle button with HTML and Javascript

Boolean Buttons

   Boolean means true or false. Yes or no. 0 or 1.  Its either it happens or not.
Javascript supports boolean- true or false. It can't be both true and false.
Its either true or false. 
   A toogle button is an example of a boolean button. Click it first, and its on. 
Click it again and its off. Html doesnt have any inbuilt toogle button, but the 
native button can be made to act as a toogle button.
  
   We first create the button element, set its id to BTN, and when clicked, run the  function TOOGLE.
   
<button id='BTN' Style='background-color:red;' onclick='TOOGLE()'> OFF </button>



  We then create the TOOGLE function that does the job.
  
 
var bool=false;

function TOOGLE(){
 
var btn= document.getElementById('BTN');

if (!bool){
//if the bool (boolean) value is false when click, 
//change it to true therefore ON.

bool=true;
btn.innerHTML='ON ';
btn.style.background='green';
}


else{
//if the bool (boolean) value is true when click, 
//change it to false therefore OFF.

bool=false;
btn.innerHTML='OFF';
btn.style.background='red';
}



}

---

Result: