title: im making a simple clock which have two buttons 1st for 12 hour format and 2nd for 24 hour format but button wont work when one button is working :JS
body: <p>NOTE-I'm new to JS and in this code, 24 hour clock runs and when I tap on 12 hour clock format
  button it won't replace with 24 hour clock format. basically the button wont work or it wont
  replace the clock format plz help</p>
  <p>I used a window. Onload function which runs the 24 hour format clock and when I tap on 12 hour format clock button it wont replace</p>
  <p>just run the code u'll understand what I mean</p>
  <p>the only thing I want to achieve in this code is a clock which have two button 1st:12 hour format 2nd:24 hour format,
  to change clock format on a tap</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>window.onload = (event) =&gt; {
    clock_24();
  };
  
  function clock_24() {
    let a;
    let date;
    let time;
    const options = {
      day: 'numeric',
      month: 'long',
      year: 'numeric'
    };
    setInterval(() =&gt; {
      a = new Date();
      date = a.toLocaleDateString(undefined, options);
      let hours = String(a.getHours()).padStart(2, '0');
      let min = String(a.getMinutes()).padStart(2, '0');
      let sec = String(a.getSeconds()).padStart(2, '0');
      let milli = a.getMilliseconds();
      time = hours + ':' + min + ':' + sec + ':' + milli;
      document.getElementById('time').innerHTML = time
      document.getElementById('date').innerHTML = date
    }, 1);
  
  
    // foramt-change
    document.getElementById("format").innerHTML = "24 Hour format";
    document.getElementById("format").style.fontSize = "32px";
    document.getElementById("format").style.fontfamily = 'Times New Roman';
    console.log('24_loaded');
  }
  
  
  // onclick - event-12-hour-format-clock
  // time-12f
  function clock_12() {
  
    setInterval(() =&gt; {
      var date = new Date();
      var hh_12 = date.getHours() &gt; 12 ? date.getHours() - 12 : date.getHours();
      var session_12 = date.getHours() &gt;= 12 ? "PM" : "AM";
      hh_12 = hh_12 &lt; 10 ? "0" + hh_12 : hh_12;
      var mm_12 = date.getMinutes() &lt; 10 ? "0" + date.getMinutes() : date.getMinutes();
      var ss_12 = date.getSeconds() &lt; 10 ? "0" + date.getSeconds() : date.getSeconds();
      tt_12 = hh_12 + ":" + mm_12 + ":" + ss_12 + " " + session_12;
      document.getElementById('time').innerHTML = tt_12
      // date-12f
      const options = {
        day: 'numeric',
        month: 'long',
        year: 'numeric'
      };
      date = date.toLocaleDateString(undefined, options);
      document.getElementById('date').innerHTML = date
    }, 1000);
  
  
  
    // foramt-change
    document.getElementById("format").innerHTML = "12 Hour format";
    document.getElementById("format").style.fontSize = "32px";
    document.getElementById("format").style.fontfamily = 'Times New Roman';
    console.log('12_loaded');
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
  }
  
  .t-d-cont {
    background-color: gray;
    margin: 50px;
    padding: 50px;
  }
  
  #format {
    border-left: 2px solid rgb(70, 166, 239);
    margin-bottom: 20px;
    padding-left: 20px;
    font-weight: bold;
  }
  
  .redline {
    border-left: 2px solid red;
    width: 100%;
    padding-left: 20px;
  }
  
  .time-box {
    margin-bottom: 50px;
  }
  
  #time {
    font-family: 'Rokkitt', serif;
    font-size: 45px;
  }
  
  .date-box {
    margin-bottom: 30px;
  }
  
  #date {
    font-family: 'Rokkitt', serif;
    font-size: 45px;
  }
  
  .dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropbtn-2 {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin-left: 15px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;!-- font link --&gt;
    &lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
    &lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
    &lt;link href="https://fonts.googleapis.com/css2?family=Rokkitt:wght@100&amp;display=swap" rel="stylesheet"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;!-- time and date container  --&gt;
    &lt;div class="t-d-cont"&gt;
      &lt;div id="format"&gt;
        &lt;h1&gt;24 Hour format&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="redline "&gt;
        &lt;div class="time-box"&gt;
          &lt;h1&gt;Current Time: &lt;span id="time"&gt;&lt;/span&gt;&lt;/h1&gt;
  
        &lt;/div&gt;
        &lt;div class="date-box"&gt;
          &lt;h1&gt; Today's Date: &lt;span id="date"&gt;&lt;/span&gt;&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- 24 hour-button --&gt;
      &lt;div class="dropdown"&gt;
        &lt;button class="dropbtn-2" onclick="clock_24();"&gt;24-hour-format&lt;/button&gt;
      &lt;/div&gt;
      &lt;!-- 12 hour-button --&gt;
      &lt;div class="dropdown"&gt;
        &lt;button class="dropbtn" onclick="clock_12();"&gt;12-hour-format&lt;/button&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  
  
  &lt;/div&gt;
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>