title: How to toggle button text when clicked with JavaScript in HTML
body: <p>I am learning the basics of JavaScript and seem to have run into a wall and just can not find the answer to figure out how to change the button text when clicked. So my JavaScript code runs to where when the button in html is clicked, then the background color of the site toggles night and day (in terms of mode). However I am trying to toggle the text in the button to change when clicked.</p>
  <p>So when the background color is in day mode, the button says &quot;Night Mode&quot;, then once clicked, I would want the button text to toggle to &quot;Day Mode&quot; to convert back to original state. Your help will be greatly appreciated!!</p>
  <p>HTML:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
      &lt;title&gt;Button Shifter&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;COLOR SHIFTER: Day/Night Mode&lt;/h1&gt;
  
      &lt;p&gt;Click the button to see some magic! Toggle between Day and Night mode! Give it a try!&lt;/p&gt;
      &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
      &lt;button onclick=&quot;toggleTheme()&quot; id=&quot;myButton&quot; &gt;Dark Mode&lt;/button&gt;
  
      &lt;script src=&quot;Javascript.js&quot;&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  <p>JavaScript:</p>
  <pre><code>function toggleTheme() {
    document.body.classList.toggle('dark-mode');
    element.classList.toggle(&quot;dark-mode&quot;);
    var btn = document.getElementById(&quot;myButton&quot;);
    
    if (btn.value == &quot;Night Mode&quot;){
      btn.value = &quot;Day Mode&quot;;
    }else {
      btn.value = &quot;Night Mode&quot;;
  }
  
  </code></pre>