title: Rotate multiple banner images
body: <p>I have a website with 3 banner ads (images) that change/rotate on every refresh or reload of the homepage. Currently, the script I'm using works, but randomly on a refresh the word &quot;undefined&quot; appears instead of one of the images. I am ok with HTML and CSS, but do not know Javascript at all.</p>
  <p>Any help would be appreciated. Below is the code I use:</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>var images = new Array(); 
  images[1] = "&lt;a href = 'https://www.paperage.com/clickthrough/Engineered-Buildings.html' target='_blank' rel='nofollow' &gt;&lt;img src='https://www.paperage.com/banners/Engineered-Buildings.gif' border='0' height='90' width='728' alt='Engineered Buildings'&gt;&lt;/a&gt;";
  images[2] = "&lt;a href = 'https://www.paperage.com/clickthrough/ABB_reduce_sheet_break_frequency.html' target='_blank' rel='nofollow' &gt;&lt;img src='https://www.paperage.com/banners/ABB-Sheet-Break-Performance.jpg' border='0' height='90' width='728' alt='ABB'&gt;&lt;/a&gt;";
  images[3] = "&lt;a href = 'https://www.paperage.com/clickthrough/Aspen_Technology_leader.html' target='_blank' rel='nofollow' &gt;&lt;img src='https://www.paperage.com/banners/Aspen-Technology-leader.jpg' border='0' height='90' width='728' alt='Aspen Technology Inc.'&gt;&lt;/a&gt;";
  index = Math.floor(Math.random() * images.length); 
  document.write(images[index]); </code></pre>
  </div>
  </div>
  </p>