title: Why does enabling timer to auto start disable my stop and reset buttons?
body: <p>Thanks for any help here, not sure what's going on - but when I enable the <code>timer();</code> line in order to automatically start the timer when the page is loaded, it disables the stop and reset buttons. I tried to only include relevant code here. Can anyone shed some light on why this is happening? Thank you in advance!</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-js lang-js prettyprint-override"><code>const startstop = () =&gt; {};
  
  var clicks = 0;
  
  function onClick() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks;
  };
  
  const input = parseInt(prompt("Enter a SAMS number: "));
  var SAMSINPUT = input;
  //console.log(SAMSINPUT);
  document.getElementById('output').innerHTML = SAMSINPUT;
  var goal = 0;
  //var SAMSINPUTtest = parseInt(document.getElementById("input"));
  //setInterval(function doIncrement() {
  //  goal += 1;
  //}, SAMSINPUT * 1000); // *1000 to convert from seconds to milliseconds
  var output2 = document.getElementById('output2');
  setInterval(function doIncrement() {
    goal += 1;
    output2.innerHTML = goal.toString();
  }, SAMSINPUT * 1000)
  
  var timerDiv = document.getElementById('timerValue'),
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    reset = document.getElementById('reset'),
    t;
  
  // Get time from cookie
  var cookieTime = null; //getCookie('time'); // for test
  
  // If timer value is saved in the cookie
  if (cookieTime != null &amp;&amp; cookieTime != '00:00:00') {
    var savedCookie = cookieTime;
    var initialSegments = savedCookie.split('|');
    var savedTimer = initialSegments[0];
    var timerSegments = savedTimer.split(':');
    var seconds = parseInt(timerSegments[2]),
      minutes = parseInt(timerSegments[1]),
      hours = parseInt(timerSegments[0]);
    timer();
    document.getElementById('timerValue').textContent = savedTimer;
    $('#stop').removeAttr('disabled');
    $('#reset').removeAttr('disabled');
  } else {
    var seconds = 0,
      minutes = 0,
      hours = 0;
    timerDiv.textContent = "00:00:00";
  }
  
  // New Date object for the expire time
  var curdate = new Date();
  var exp = new Date();
  
  // Set the expire time
  exp.setTime(exp + 2592000000);
  
  function add() {
  
    seconds++;
    if (seconds &gt;= 60) {
      seconds = 0;
      minutes++;
      if (minutes &gt;= 60) {
        minutes = 0;
        hours++;
      }
    }
  
    timerDiv.textContent = (hours ? (hours &gt; 9 ? hours : "0" + hours) : "00") +
      ":" + (minutes ? (minutes &gt; 9 ? minutes : "0" + minutes) : "00") +
      ":" + (seconds &gt; 9 ? seconds : "0" + seconds);
  
    // Set a 'time' cookie with the current timer time and expire time object.
    var timerTime = timerDiv.textContent.replace("%3A", ":");
    //console.log('timerTime', timerTime);
    //setCookie('time', timerTime + '|' + curdate, exp);
  
    timer();
  }
  
  function timer() {
    t = setTimeout(add, 1000);
  }
  
  timer(); // autostart timer
  
  /* Start button */
  start.onclick = timer;
  
  /* Stop button */
  stop.onclick = function() {
    clearTimeout(t);
  }
  
  /* Clear button */
  reset.onclick = function() {
    timerDiv.textContent = "00:00:00";
    seconds = 0;
    minutes = 0;
    hours = 0;
    //setCookie('time', "00:00:00", exp);
  }
  
  /**
   * Javascript Stopwatch: Button Functionality
   * 
   */
  
  $('#start').on('click', function() {
    $('#stop').removeAttr('disabled');
    $('#reset').removeAttr('disabled');
  });
  
  $('#stop').on('click', function() {
    $(this).prop('disabled', 'disabled');
  });
  
  $('#reset').on('click', function() {
    $(this).prop('disabled', 'disabled');
  });
  
  /**
   * Javascript Stopwatch: Cookie Functionality
   * 
   */
  
  
  function setCookie(name, value, expires) {
    document.cookie = name + "=" + value + "; path=/" + ((expires == null) ? "" : "; expires=" + expires.toGMTString());
  }
  
  function getCookie(name) {
    var cname = name + "=";
    var dc = document.cookie;
  
    if (dc.length &gt; 0) {
      begin = dc.indexOf(cname);
      if (begin != -1) {
        begin += cname.length;
        end = dc.indexOf(";", begin);
        if (end == -1) end = dc.length;
        return unescape(dc.substring(begin, end));
      }
    }
    return null;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: powderblue;
  }
  
  p {
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;body onload="startstop();"&gt;
    &lt;p&gt; SAMS VALUE:
      &lt;a id="output"&gt;&lt;/a&gt;
    &lt;/p&gt;
  
    &lt;p&gt; GOAL:
      &lt;a id="output2"&gt;&lt;/a&gt;
    &lt;/p&gt;
  
    &lt;button style="background-color:green" type="button" onClick="onClick()"&gt;ACTUAL&lt;/button&gt;
    &lt;p&gt;Actual Count: &lt;a id="clicks"&gt;0&lt;/a&gt;&lt;/p&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-4"&gt;&lt;/div&gt;
        &lt;div class="col-sm-4"&gt;
          &lt;div id="timeContainer" class="well well-sm"&gt;
            &lt;time id="timerValue"&gt;&lt;/time&gt;
          &lt;/div&gt;
          &lt;div id="timerButtons"&gt;
            &lt;button id="start" class="btn btn-success"&gt;START&lt;/button&gt;
            &lt;button id="stop" class="btn btn-danger" disabled="disabled"&gt;STOP&lt;/button&gt;
            &lt;button id="reset" class="btn btn-default" disabled="disabled"&gt;RESET&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-4 col-sm-4 col-md-4"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>