只有在单击第一个按钮时才能单击第二个按钮

Question

所以我有一个时钟脚本，当您单击开始时，会显示当前时间。单击停止时也会发生同样的情况。我现在想要发生的是，当我单击第一个按钮时，第二个按钮会被激活，因为您只能在单击第一个按钮时单击第二个按钮。

我的 HTML

**<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="style/new-style.css">
  <title>Digital Clock</title>
</head>

<body>
<center>
  <button class="panel2" onclick="CurrentTime()">Start rit</button>
  <p>Start van de Rit: <span id="Start Rit" /></p>
  <button class="panel1" onclick="ZaWarduu()">Stop rit</button>
  <p>Einde van de Rit: <span id="Einde Rit"/></p>
  <p>Clock : <span id="Clock" /></p>
    <script type="text/javascript">
    </script>
  </center>
  </body>

  </html>

Javascript 代码

    //Met deze functie word de tijd op dit moment laten zien in de html code met het id:clock
    var time;
    function ItsShowTime(){
            var date = new Date();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();

            h = (h < 10) ? "0" + h : h;
            m = (m < 10) ? "0" + m : m;
            s = (s < 10) ? "0" + s : s;
            time = h + ":" + m + ":" + s;

            document.getElementById("Clock").textContent = time;
            setTimeout(ItsShowTime, 1000);
    }

    //Met deze functie zorg je ervoor dat als je klikt op start rit de tijd op dit moment er komt te staan.
    function CurrentTime(){
      //var value kijkt hoeveel er word geklikt op de knop start rit. Je kan dat zijn door de pagina te inspecteren en naar console te gaan als je daar eenmaal bent klik op start rit dan zie je hoe de var value omhoog gaat bij een laat hij de tijd zjin bij twee komt de alert te staan.
      var value = parseInt(document.getElementById('Start Rit').value, 10);
      value = isNaN(value) ? 0 : value;
      value++;
      document.getElementById('Start Rit').value = value;
      console.log(value);
      // deze if statement zorgt ervoor dat als er nog een keer geklikt word op start dat er een alert oppupt.
      if (value == 1) {
        document.getElementById("Start Rit").innerText = time;

      }
      if(value != 1){
        alert("Rit kan niet opnieuw gestart worden.");
      }
    }
    function ZaWarduu(){
      var value2 = parseInt(document.getElementById('Einde Rit').value, 10);
      value2 = isNaN(value2) ? 0 : value2;
      value2++;
      document.getElementById('Einde Rit').value = value2;
      console.log(value2);
      // deze if statement zorgt ervoor dat als er nog een keer geklikt word op start dat er een alert oppupt.
      if (value2 == 1) {
        document.getElementById("Einde Rit").innerText = time;

      }
      if(value2 != 1){
        alert("Rit kan niet opnieuw gestopt worden.");
      }
    }

    function KeepTime(){
      if (Location.reload(DigitalClock.html)){

      }
    }
    ItsShowTime();
    KeepTime();

我查看了几个关于堆栈溢出的类似问题，并试图在谷歌中查看一些搜索结果，不幸的是我找不到任何东西。

Answer 1

例如通过 localStorage 共享这两个按钮之间的状态，或者如果您想增加复杂性，可以通过 Redux 之类的存储：)