Javascript 单独点击，相同按钮，功能恢复正常

我可以单击按钮并更改它，但我希望能够再次单击它并使其恢复正常，最好使用普通JavaScript或JavaScript

我已经包括了我的HTML、CSS和JavaScript代码。 我看了很多论坛，大多数问题都是关于一次点击运行多个功能；但是，我希望能够一次接一次地运行单独的函数。或者，有没有一种方法可以让第二次单击自动恢复正常，而无需编写单独的函数

功能温度计（）{
var a；
a=document.getElementById（'span1'）；
a、 innerHTML=`；
setTimeout（函数（）{
a、 innerHTML=`；
}, 1000);
setTimeout（函数（）{
a、 innerHTML=`；
}, 2000)
setTimeout（函数（）{
a、 innerHTML=`；
}, 3000)
setTimeout（函数（）{
a、 innerHTML=`；
}, 4000)
}
温度计（）；
设定间隔（温度计，5000）；
函数myFunction（）{
b=document.getElementById（'jo'）；
b、 innerHTML=`；
}

#span1{
字号：80px；
颜色：粉红；
左侧填充：20px；
}
#第1步：悬停{
颜色：rgb（219,33,0）；
}
.待办事项按钮{
字号：38px；
宽度：120px；
高度：60px；
颜色：白色；
背景：朗格林；
边界：无；
边界半径：6px；
}
.fa咧嘴一笑：悬停{
颜色：黄色；
}
h1{
字体系列：“Paytone One”，无衬线；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
文本对齐：居中；
垫底：20px；
字体大小：45px；
颜色：粉红；
}

事項清單
热上市

我将引入一个

切换

变量，该变量随函数中的每次单击而递增。根据模数

%2

，我们可以交替切换以显示不同的表情

let toggle=0；
常量滚动=“”；
常量舌头=“”；
功能温度计（）{
var a；
a=document.getElementById（'span1'）；
a、 innerHTML=`；
setTimeout（函数（）{
a、 innerHTML=`；
}, 1000);
setTimeout（函数（）{
a、 innerHTML=`；
}, 2000)
setTimeout（函数（）{
a、 innerHTML=`；
}, 3000)
setTimeout（函数（）{
a、 innerHTML=`；
}, 4000)
}
温度计（）；
设定间隔（温度计，5000）；
函数myFunction（）{
b=document.getElementById（'jo'）；
b、 innerHTML=（++切换%2）？滚动：舌头；
}

#span1{
字号：80px；
颜色：粉红；
左侧填充：20px；
}
#第1步：悬停{
颜色：rgb（219,33,0）；
}
.待办事项按钮{
字号：38px；
宽度：120px；
高度：60px；
颜色：白色；
背景：朗格林；
边界：无；
边界半径：6px；
}
.fa咧嘴一笑：悬停{
颜色：黄色；
}
h1{
字体系列：“Paytone One”，无衬线；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
文本对齐：居中；
垫底：20px；
字体大小：45px；
颜色：粉红；
}

事項清單
热上市

通常添加元素并将其隐藏。然后单击事件处理程序检查它是否隐藏，并相应地隐藏或显示它。您能告诉我这是什么样子吗？或者一个示例代码？如果你不介意的话？谢谢！我将学习您的代码以及有关递增和切换的更多内容。