title: document.getElementById(element).innerText = variable
body: <p>I'm trying to write a loop to improve the way I assign values to html elements on a web page.</p>
  
  <p>at the moment I use....</p>
  
  <pre><code>document.getElementById("Season201516Score1").innerHTML = Game201516Score1;
  document.getElementById("Season201516Score2").innerHTML = Game201516Score2;
  document.getElementById("Season201516Score3").innerHTML = Game201516Score3;
  </code></pre>
  
  <p>and so on....</p>
  
  <p>The variables are </p>
  
  <pre><code>var Game201516Score1= "L 0-2"
  var Game201516Score2= "W 1-0"
  var Game201516Score3= "D 2-2"
  </code></pre>
  
  <p>The loop i'm using is </p>
  
  <pre><code>for (var i = 1; i &lt;= 3; ++i) 
  {
  element = 'Season201516Score' + i
  Score = ('Game201516Score' + i)
  document.getElementById(element).innerText = Score;
  }
  </code></pre>
  
  <p>It works in so far that it puts text in the correct elements on the page but rather than the values "<code>L 0-2</code>", "<code>W 1-0</code>" or "<code>D 2-2</code>" it gives the text "<code>Game201516Score1</code>", "<code>Game201516Score2</code>" and "<code>Game201516Score3</code>".</p>
  
  <p>Can someone show me what I'm doing wrong.</p>