Javascript 为单个按钮提供3个文本值。具有用户友好的界面

我正在制作一个有3个值的按钮。 -当用户指向按钮时 -当用户鼠标离开按钮时 -当用户单击按钮时 所有这些都在一个按钮。 我的代码是

<html........and declared java script code in another file.</html>
<button id="cal" onclick="calcIt()" onmouseover="showIt()" onmouseout="backOn">Calculate Values</button>

我的问题是，当用户执行onclick或showIt函数时，无法找到删除backOn函数的方法。 因为当用户曾经计算过值，而系统仍然要求计算时，它看起来不太好

如果需要我的代码文件，请告诉我。

//当用户单击按钮时
函数calcIt（）{
document.getElementById（“cal”）.innerHTML=“计算值”；
}
//当用户鼠标越过
函数showIt（）{
document.getElementById（“cal”）.innerHTML=“单击以显示值”；
}
//当用户鼠标离开时
函数backOn（）{
document.getElementById（“cal”）.innerHTML=“计算值”；
}
//我希望在调用onclick/showIt一次时删除此函数

---

计算值

鼠标输出值中缺少一个函数括号

//when user clicks on button
function calcIt(){

document.getElementById("calc").innerHTML = "Calculation values";

}
//when user mouseovers
function showIt(){
document.getElementById("calc").innerHTML = "Click To Show Value";
}
//when user mouseouts
function backOn(){
document.getElementById("calc").innerHTML = "Calculate Values";
}
//i want this function to be deleted when onclick/showIt is called once