title: Can access DOM elements outside HTML form but not inside. Not sure why
body: <p>I'm building a form where one of the fields gets the value of a stopwatch countdown. When stopped, the time elapsed should be submitted as part of the data. The stopwatch JS function works perfectly if rendered as an H1, but doesn't work when I try to render the same countdown as a form input value and I have no idea why. Any help would be greatly appreciated. Specifically, it's the input value (incrementing digits) that does not render at all..it remains blank. A test function will work to alert &quot;hello&quot; as the <code>onclick</code>, but the desired function does not, though the same thing works outside the form. Here's my code:</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>// Define vars to hold time vakues
  let seconds = 0;
  let minutes = 0;
  let hours = 0;
  
  // Define var to hold setinterval function
  let interval = null;
  
  // Define var to hold stopwatch status
  let status = "stopped";
  
  // Stopwatch logic to determine when to increment next value, etc.
  function stopwatch() {
    seconds++;
  
    // logic to determine when to increment next value
    if (seconds / 60 === 1) {
      seconds = 0;
      minutes++;
  
      if (minutes / 60 === 1) {
        minutes = 0;
        hours++;
      }
    }
  
    // If seconds/minutes/hours is only one digit, add a leading 0 to the values
    if (seconds &lt; 10) {
      displaySeconds = "0" + seconds.toString();
    } else {
      displaySeconds = seconds.toString();
    }
  
    if (minutes &lt; 10) {
      displayMinutes = "0" + minutes.toString();
    } else {
      displayMinutes = minutes.toString();
    }
  
    if (hours &lt; 10) {
      displayHours = "0" + hours.toString();
    } else {
      displayHours = hours.toString();
    }
  
    // Display updated time values (increments in real time) to user
    document.getElementById("display").value = displayHours + ":" + displayMinutes + ":" + displaySeconds;
  }
  
  // Function to start / stop the watch
  function startStop() {
    if (status === "stopped") {
      // Start the Stopwatch  (by calling the setInterval function)
      interval = window.setInterval(stopwatch, 1000);
      // Changes "start" button to "stop" button
      document.getElementById("startStop").innerHTML = "Stop";
      document.getElementById("startStop").style = "background: red";
      status = "started";
  
    } else {
      window.clearInterval(interval);
      document.getElementById("startStop").innerHTML = "Start";
      status = "stopped";
    }
  }
  
  
  // Function to reset the Stopwatch
  function reset() {
    window.clearInterval(interval);
    seconds = 0;
    minutes = 0;
    hours = 0;
  
    document.getElementById("duration").value = "00:00:00";
    // Changes "stop" button to "start" button
    document.getElementById("startStop").innerHTML = "Start";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="success.php" method="post"&gt;
    &lt;label for="session-duration" class="form-label"&gt;duration: &lt;/label&gt;
    &lt;input type="text" name="session-duration" id="duration"&gt;
    &lt;button type="button" name="button" id="startStop" onclick="startStop()"&gt;Start&lt;/button&gt;
    &lt;button type="button" name="button" id="reset" onclick="reset()"&gt;Reset&lt;/button&gt;
    &lt;input type="submit" name="session-submit" value="SUBMIT"&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>