title: How can I change the image source on click with JavaScript?
body: <p>I'm trying to figure out how I can change an image source when clicking on different buttons to show a picture of an animal. My JS code is in-between script tags in the head of my HTML doc. I pasted it below. I am using Safari.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Welcome&lt;/title&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
  
      &lt;script&gt;
      function change (){
       document.getElementById("pic").src="./images/lion.jpg";
      }
      &lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  
    &lt;header&gt;
     &lt;div class="container"&gt;
      &lt;h1&gt;Choose an Animal&lt;/h1&gt;
      &lt;hr&gt;
     &lt;/div&gt;
    &lt;/header&gt;
  
    &lt;section&gt;
     &lt;div class="container"&gt;
      &lt;img src="./images/image.jpg" id="pic"&gt;
     &lt;/div&gt;
    &lt;/section&gt;
  
    &lt;section id="animals"&gt;
     &lt;div class="container"&gt;
       &lt;button type="button" class="button1"     onclick="change"&gt;Lion&lt;/button&gt;
       &lt;button type="button" class="button1"&gt;Tiger&lt;/button&gt;
       &lt;button type="button" class="button1"&gt;Bear&lt;/button&gt;
     &lt;/div&gt;
    &lt;/section&gt;
  
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>