title: Display 12-hour and 24-hour time
body: <p>I want to make a webpage that displays the current time. When the &quot;12-hour format&quot; button is clicked, the time in 12-hour time will display in the div area. When the &quot;24-hour format&quot; button is clicked, the time will show in 24-hour time in the div area. Currently nothing happens when these buttons are clicked. Help!</p>
  <p>HTML:</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Clock&lt;/title&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;clock.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id=&quot;textbox&quot;&gt;&lt;/div&gt;
      &lt;br/&gt;
      &lt;button type=&quot;radio&quot; onclick=&quot;getTwelveHrs()&quot;&gt;12 Hour Format&lt;/button&gt;
      &lt;button type=&quot;radio&quot; onclick=&quot;getTwentyFourHrs()&quot;&gt;24 Hour Format&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>JavaScript:</p>
  <pre><code>function getTwelveHours{
      if (i &lt; 10) {
          i = &quot;0&quot; + i;
      }
      return i;
  }
  
  function startTime() {
      var today = new Date();
      var h = today.getHours();
      var m = today.getMinutes();
      var s = today.getSeconds();
      m = checkTime(m);
      s = checkTime(s);
      document.getElementById('textbox').innerHTML = h + &quot;:&quot; + m + &quot;:&quot; + s;
      t = setTimeout(function () {
          startTime()
      }, 500);
  }
  
  startTime();
  
  function getTwentyFourHrs() {
      var today = new Date();
      var h = today.getHours();
      var m = today.getMinutes();
      var s = today.getSeconds();
      m = checkTime(m);
      s = checkTime(s);
      document.getElementById('textbox').innerHTML = h + &quot;:&quot; + m + &quot;:&quot; + s;
      var t = setTimeout(function() {
          startTime()
      }, 500);
  }
  
  function checkTime(i) {
      if (i &lt; 10) {
          i = &quot;0&quot; + i
      }; 
      return i;
  }
  </code></pre>