title: how to make the clock tick by pressing the start button
body: <p>How to make the clock tick by pressing the start button. If i press START several times, the time will be updated, but I need only press once to update the clock every second. It's unclear why the recursive function call does not work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
  &lt;body&gt;
  
  
    &lt;input type="button" onclick="clock.clockStart()" value="Start"&gt;
  
    &lt;input type="button" onclick="clock.clockStop()" value="Stop"&gt;
  
    &lt;div class='clocks'&gt;
      &lt;span class='hours'&gt;&lt;/span&gt;
      &lt;span class='minutes'&gt;&lt;/span&gt;
      &lt;span class='seconds'&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;script&gt;
      'use strict';
  
      class Clock {
        constructor() {
          this.hh = document.querySelector('.hours');
          this.mm = document.querySelector('.minutes');
          this.ss = document.querySelector('.seconds');
        }
  
  
        clockStart() {
          let self = this;
  
          self.date = new Date();
  
          self.timer = setTimeout(function tick1() {
  
            self.hh.textContent = '' + self.date.getHours();
            self.mm.textContent = ': ' + self.date.getMinutes();
            self.ss.textContent = ': ' + self.date.getSeconds();
  
            self.timer = setTimeout(tick1, 1000);
          }, 1000);
        }
        clockStop() {
          clearTimeout(this.timer);
        }
  
      }
  
      let clock = new Clock();
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you.</p>