Creating A Button Element to perform dual function , first click to first function , 2nd click for Second Function,

Question

Create a button Which brings the change in element like

<p id="p">This is paragraph </p>.
// Css color of this is black

<button onclick=change()></button>//html part

// JS part
Function change(){
Var ch = Document.getElementById("p");
ch.style.color="red";
}

Then after the change comes in effect , the button itself chnge its functon to new functon linke Undo function

Function undo( ){
ch.style.color="black";
}

Suggest a way for performing both function alternatively by one button element

Answer 1

Do smt this:
//HTML
<p id="p"></p>
<button onclick=click()></button>

//JS
var state = "black"
function click(){
var ch = document.getElementById("p")
if(state==="black"){
state = "red";
ch.style.color="red";
}
else {
state = "black"
ch.style.color="black";
}
}

Answer 2

Further to Maneren 's answer, if you want to avoid messing up with the flag state, use closure.

Answer 3

Just call one function with an integer parameter and write any actions to that function, so you have <button ... onclick="f(n)">. This way you dont need more than one function for this task.