Change image using event listener
<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>