title: How to allow different images inside array to link to different url webpages
body: <p>I would like to link different images inside the array to different url. The images will be randomised every 2 seconds. However, I would like to make sure that each image has its unique url. I can only link to one url so far.</p>
  
  <p>Need help in this, thanks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//start with id=0 after 2 seconds
  var thisId = 0;
  
  $(function(){
   //prepare Your data array with img urls
   var dataArray=new Array();
   dataArray[0]="cat1.jpg";
   dataArray[1]="cat2.jpg";
   dataArray[2]="cat3.jpg";
  
   window.setInterval(function(){
   var randomNum = Math.floor(Math.random() * dataArray.length);
   
   if (thisId==randomNum){randomNum++;};
   if (randomNum==3){randomNum=0};
   thisId=randomNum;
   
   document.getElementById("thisImg").src = dataArray[randomNum]
   },2000); 
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Task 2&lt;/title&gt;
   
   &lt;!-- calling external js file --&gt;
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;a href="https://www.petco.com/shop/en/petcostore/category/cat" target="_blank"&gt;&lt;img id="thisImg" alt="img" src="cat1.jpg" /&gt;&lt;/a&gt;
   &lt;script src ="Task2.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>