我的 on/off 开关没有关闭，我不知道如何修复

Question

我需要一个按钮，它会在单击后每秒显示和更新时间。如果再次单击它应该什么都不显示。我试了很多（开关等）但我无法解决它。如果我单击按钮，它会显示时间并更新它，但如果我再次单击它，它会清空该段落的 innerHTML，但一秒钟后时间会再次弹出并自行更新。有人可以告诉我为什么我的 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。
Call Time right-away 立即显示时间，然后每 1000ms.
更有意义地命名变量和 ID。
避免声明变量供 one-time 使用。
向用户清楚地描述正在发生的事情以及可能的操作和结果。
使用 onclick 完全没问题。我最近才开始使用 let 而不是 var，我想我实际上应该在这里使用 const （我没有，为了调试），而且，我最近开始使用textContent 而不是 innerText = 我也在学习！
（小语法错误：“your”，而不是“you're”）

附录：好的，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>

我的 on/off 开关没有关闭，我不知道如何修复

My on/off switch doesn't go off and i don't know how to fix

javascript

function

clearinterval