title: Changing background image of table dynamically
body: <p>I'm trying to change the background images of table cells with Javascript and I do so by creating the name of the image inside the code using the counter index in a for loop <code>(i)</code></p>
  
  <p>This doesn't work, can somebody explain why and how to do it properly?
  If I put a static image name it works, if I try dynamically it doesn't. </p>
  
  <p><strong>This Doesn't work:</strong></p>
  
  <pre><code>var tbl = document.getElementById('SelectionBoard');
  var cells = tbl.getElementsByTagName('td');
  
  for (var i = 0; i &lt; cells.length; i++)
  {
      cells[i].addEventListener('click', sbClick, false);
      var imgSrc = 'ulr(./FoodImages/fruit' + i.toString() + '.jpg)';
      cells[i].style.backgroundImage=imgSrc;
  }
  </code></pre>
  
  <p><strong>This does:</strong></p>
  
  <pre><code>var tbl = document.getElementById('SelectionBoard');
  var cells = tbl.getElementsByTagName('td');
  
  for (var i = 0; i &lt; cells.length; i++)
  {
      cells[i].addEventListener('click', sbClick, false);
      var imgSrc = 'url(./FoodImages/fruit3.jpg)'; 
      cells[i].style.backgroundImage=imgSrc;
  }
  </code></pre>