title: Value of variable in string not changing
body: <p>I'm trying to make a function which generates a script using strings as template for the script. In these template strings I have a variable which I use as index for array item like this:</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 annotList = [ { type: "something", color: "blue" }]; // "annotation" objects are pushed in it
  
  function generateScript() {
    var output = document.getElementById("output");
  
    var idx = 0; // array item index variable
  
    // template inserted in final template
    var addAnnot_template = 'this.addAnnot({ ' +
      'type:' + annotList[idx].type + ',' +
      'strokeColor: color.' + annotList[idx].color + ','
  
    // loop through an array named annotList, and increment the index for each items in order to add indexed template for each
    for (var i = 0; i &lt; annotList.length - 1; i++) {
      idx++;
      addAnnot_template += addAnnot_template;
    }
  
    output.innerHTML = 'beginning of template' +
  
      addAnnot_template +
  
      'end of template';
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>My problem is that the idx variable value is not changing despite it's incremented in the for loop. What am I doing wrong ?</p>