我的开/关开关没有熄灭，我不知道如何修复

Question

我需要一个按钮，它将显示并更新单击后的每秒时间。如果再次点击，它应该什么都不显示。我试了很多(切换等(，但我无法解决它。如果我点击按钮，它会显示时间并更新它，但如果我再次点击，它会清空段落的内部HTML，但一秒钟后，时间再次弹出并更新自己。有人能告诉我为什么我的clearInterval不工作，以及我如何解决这个问题吗？

var abc = false;
function switched() {
let x = document.getElementById("switch");
if (!abc) { 
var myFun = setInterval(Time, 1000);
abc = true;
return;
}
if (abc) {
clearInterval(myFun);
abc = false;
x.innerHTML = "";
return;
}
function Time() {
var date1 = new Date();
var t = date1.toLocaleTimeString();
x.innerHTML = t;
}
}

<p>On switch which shows you're current time:</p>
<button onclick="switched()">On</button>
<p id="switch"></p>

Answer 1

全局声明包含区间的变量
还有按钮和段落
使用按钮的textContent值，而不是abc
立即呼叫Time以立即显示时间，然后每1000ms显示一次
更有意义地命名变量和id
避免声明一次性使用的变量
向用户清楚地描述正在发生的事情以及可能的行动和结果
使用onclick非常好。我最近刚开始使用let而不是var，我想在这里我实际上应该使用const(为了调试，我没有使用(，而且，我最近开始使用textContent而不是innerText=我也在学习
(轻微语法错误："你的"，而不是"你是"(

---

附录：好的，let用于interval，因为它稍后被分配了一个值(并且很可能被多次分配(，而const用于button和paragraph，因为它们总是"；点"；同样的事情，只是"；事情"的属性将更改。。。

let interval;
const button = document.getElementById("switchButton");
const paragraph = document.getElementById("timeParagraph");
function toggleSwitch() {
if(button.textContent == "On") {
button.textContent = "Off";
Time();
interval = setInterval(Time, 1000);
}
else {
button.textContent = "On";
clearInterval(interval);
paragraph.textContent = "";
}
}
function Time() {
paragraph.textContent = new Date().toLocaleTimeString();
}

<p>Turn On to show your current time, Off to clear:</p>
<button id="switchButton" onclick="toggleSwitch()">On</button>
<p id="timeParagraph"></p>