title: Random path in svg in javascript
body: <p>I wrote the following javaScript to try to draw a random path in an svg.</p>
  
  <pre><code>&lt;script&gt;
  window.onload = function() {
  
      function randomPath(){
      var x = Math.trunc(Math.random());
      var y = Math.trunc(Math.random());
      var xstep = 0;
      var ystep = 0;
      var path = '0,0';
      for (i = 0; i &lt; 2 ; i++) {
            path += ' ';
            path += (x).toString();
            path += ',';
            path += (y).toString();
            xstep = Math.random();
            ystep = Math.random();
            xstep *= 10;
            ystep *= 10;
            x += Math.trunc(xstep);
            y += Math.trunc(ystep);
          };
          return path;
        };
  
      var figure = document.createElementNS('http://www.w3.org/2000/svg','svg');
      figure.id = 'brownian-figure';
      figure.setAttribute('height', '400pt');
      figure.setAttribute('width', '200pt');
  
      var pathArray = [];
      for (i = 0; i &lt; 3; i++){
      pathArray[i] = document.createElementNS('http://www.w3.org/2000/svg','polyline');
      };
  
      for (i = 0; i &lt; 3; i++){
      var path = randomPath();
      alert(path);
      pathArray[i].setAttribute('points', path);
      pathArray[i].setAttribute('style', 'fill:none;stroke:rgba(0,0,0,1);stroke-width:1');
      figure.appendChild(pathArray[i]);
      };
  
      var divfigure = document.createElement('div');
      divfigure.id = 'divfigure';
      divfigure.style = 'margin:0pt;padding:0pt;border:0pt none;background-color:rgba(240,240,240,1);position:absolute;top:100pt;left:100pt;width:200pt;height:400pt;';
      divfigure.appendChild(figure);
  
      document.body.appendChild(divfigure);
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>Notice there are only 2 steps in the for in the <code>randomPath()</code> function. </p>
  
  <p>The code <strong>does run</strong> and draws with that small value for the number of steps. There is an <code>alert(path)</code> over there to let me see the path before I try to assign it.</p>
  
  <p>However, <strong>with 3 steps or more in the <code>for</code> inside <code>randomPath()</code> the code breaks</strong>. The <code>alert(path)</code> still shows the longer path, but the script gives the error</p>
  
  <pre><code>TypeError: pathArray[i] is undefined
      pathArray[i].setAttribute('points', path);
  </code></pre>
  
  <p>If I replace <code>path</code> in the line with the error, by an explicit path (output by <code>randomPath()</code>), say <code>'0,0 0,0 4,8 8,15'</code> it still doesn't work. But if I do it and also remove the call to the <code>randomPath()</code> function it works again.</p>
  
  <p>I am confused. It seems to be that the function <code>randomPath()</code> works well since the <code>alert</code> displays a well-formed string. The svg also works with the same string input explicitly. But the two together don't work for some reason.</p>
  
  <p>What is the problem?</p>