title: Change image using event listener
body: <p>I have two images: <code>images/pic1.png</code> and <code>images/pic2.png</code>. And I want to make something like this:
  When I click on image(pic1) for the first time it changes its <code>src</code> to <code>images/pic2.png</code> and then 2nd image is displayed. Next, I click again (2nd time), and my first image is displayed again. And if I click for the third time my 2nd img is displayed again. <em>And again and again and again.</em></p>
  
  <p>Also, I'd like to make it with loop <code>if(...) ... else{...}</code>.</p>
  
  <p>Here's my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;img src="images/pic1.png" id="myImage"/&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var img = document.getElementById("myImage");
  img.addEventListener("click", function(){
    if(img.src != "images/pic2.png"){
      img.src = "images/pic2.png";}
    else{
      img.src = "images/pic1.png";}});
  </code></pre>
  
  <p>I do not know what else to do...</p>