title: Change image onclick using javascript
body: <p>Here's my problem:</p>
  
  <p>I am new to Javascript and I am trying to make my image change on click.</p>
  
  <p>It's a simple counter game that does a 2 frame animation of squidward hitting the dab.</p>
  
  <p>So far I have got the counter to work but I cannot get the image to change on click as well. Also, it's going to have to change back to the original image so that it can be clicked and counted again. </p>
  
  <pre><code>  &lt;html lang="en"&gt;
   &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
  &lt;link rel="stylesheet" href="./style.css"&gt;
  &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
   &lt;body&gt;
  &lt;div class="container"&gt;
  
          &lt;button onclick="dabMan()"&gt;&lt;img src="./squid-dab1.gif"&gt; . 
          &lt;/button&gt;
          &lt;br&gt;&lt;br&gt;
          How many dabs??
          &lt;input type="text" id="text"&gt;
  
  &lt;/div&gt;
  
  
  &lt;script src="./script.js"&gt;&lt;/script&gt;
  
  
    &lt;/body&gt;
   &lt;/html&gt;
  
  var dabcount = 0;
  
  function dabMan() {
  dabcount = dabcount + 1
  document.getElementById('text').value = dabcount;
  console.log("dabMan", dabMan)
  
  document.getElementById("./squid-dab1.gif") .src = "./squid-dab2.gif";
  console.log("changeimage", dabMan)
   }
  </code></pre>