title: How do I change an image and text by clicking on a button?
body: <p>Very new to all of this so might be a simple question but I'd appreciate some advice.</p>
  <p>I'm trying to change the image in head to another image when a button is clicked and also change the text in h1.</p>
  <p>The first button would revert back to the orignal image so currently trying things out on the second one.</p>
  <p>=================================================</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;style&gt;
          body {
          background-color: rgb(224, 221, 26);
          }
          .dark-mode {
          background-color: rgb(49, 163, 93);
          }
          &lt;/style&gt;
  &lt;head&gt;
      &lt;img src= &quot;http://www.outgrabe.net/bird00.jpg&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;
          Pardalote by fir0002 (CC-by-NC)
      &lt;/h1&gt;
      &lt;h2&gt;
      &lt;button&gt;Pardalote&lt;/button&gt;
      &lt;button onclick=&quot;myfunction01()&quot;&gt;Purple Swamp Hen&lt;/button&gt;
      &lt;script&gt;
          function myfunction01() {
              var element = document.head;
              
          }
      &lt;/script&gt;
      &lt;button&gt;White-headed Stilt&lt;/button&gt;
      &lt;button&gt;Inland Thornbill&lt;/button&gt;
      &lt;button&gt;Rose Robin&lt;/button&gt;
      &lt;/h2&gt;
      
      &lt;h3&gt;
          &lt;button onclick=&quot;myFunction()&quot;&gt;Change Theme&lt;/button&gt;
          &lt;script&gt;
          function myFunction() {
             var element = document.body;
             element.classList.toggle(&quot;dark-mode&quot;);
          }
          &lt;/script&gt;
      &lt;/h3&gt;
      
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>