title: Set iframe src from list of urls
body: <p>I'm having trouble setting iframe source dynamically. I have a page with n iframes and img elements and a list of urls. I'm trying to set each iframe's/ img's src attribute using a for loop.</p>
  
  <p>My html is this:</p>
  
  <pre><code>&lt;iframe id="iframe-1" width="400" height="300"&gt;iframe one&lt;/iframe&gt;
  &lt;img width="400" height="300"&gt;image one&lt;/img&gt;
  &lt;iframe id="iframe-2" width="400" height="300"&gt;iframe two&lt;/iframe&gt;
  &lt;img width="400" height="300"&gt;image one&lt;/img&gt;
  &lt;iframe id="iframe-3" width="400" height="300"&gt;iframe three&lt;/iframe&gt;
  </code></pre>
  
  <p>Here is what I've tried. I've also tried :</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  var sources =     ["www.google.com","www.yahoo.com","www.weather.com","www.bing.com","www.nytimes.com"];
  var elements = document.querySelectorAll("iframe, src");
  
  for (var i = o; i &lt; elements.length; i++)
  {
      elements[i].src = sources[i];
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The source is not showing up in the iframes/ imgs. Is there a better DOM selector to use than querySelectorAll? or should I have elements query inside the loop? I've tried variations which have not worked.</p>
  
  <p>Thanks for any help</p>