如何制作多个文本叠加层

Question

我有以下问题：我试图制作倍数叠加，它只是不起作用。它始终只显示最后一个作为叠加层。即使当我按下第一个按钮或第二个按钮时我输入不同的“id” - 我将覆盖2，当我按下id“overlay1”时我永远不会看到overlay1我怎样才能使它工作？function on() {  document.getElementById("overlay1").style.display = "block";}function off() {  document.getElementById("overlay1").style.display = "none";}function on() {  document.getElementById("overlay2").style.display = "block";}function off() {  document.getElementById("overlay2").style.display = "none";}#overlay1 {  position: fixed;  display: none;  width: 100%;  height: 100%;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: rgba(0, 0, 0, 0.5);  z-index: 2;  cursor: pointer;}#text1 {  position: absolute;  top: 50%;  left: 50%;  font-size: 50px;  color: white;  transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);}#overlay2 {  position: fixed;  display: none;  width: 100%;  height: 100%;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: rgba(0, 0, 0, 0.5);  z-index: 2;  cursor: pointer;}#text2 {  position: absolute;  top: 50%;  left: 50%;  font-size: 50px;  color: white;  transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);}<div id="overlay1" onclick="off()">  <div id="text1">Overlayy878 Text</div></div><div style="padding:20px">  <h2>Overlay with Text</h2>  <button onclick="on()">Turn on overlay effect</button></div><div id="overlay2" onclick="off()">  <div id="text2">Overlay 2 TWO Text</div></div><div style="padding:20px">  <h2>Overlay with Text</h2>  <button onclick="on()">Turn on overlay effect</button></div>