title: Setting innerHTML for a map element
body: <p>I've been banging my head on this one for a while now. At on point it was working (though I might have just imagined it).</p>
  
  <p>This is a basic (or supposed to be) use of the map element with polygon area elements. The map's area elements should be added to the map after the rest of the document loads.  This is done with javascript so the number of areas (wedges of a circle) can be changed easily, as well as the radius of the circle.</p>
  
  <pre><code>//test.html body (points.js is included in head)
  
  &lt;img src="http://www.placehold.it/600x600" usemap="#graphMap"&gt;
  &lt;map name="graphMap"&gt;&lt;/map&gt;
  &lt;script&gt;
      getPoints();
  &lt;/script&gt;
  
  //points.js
  
  function getX(radius, angle, num) {
    return Math.round(radius * Math.sin(angle * (i) * Math.PI / 180) + 298);
  };
  
  function getY(radius, angle, num) {
    return Math.round(radius * Math.cos(angle * (i) * Math.PI / 180) + 298);
  };
  
  function changePointColor(index) {
    var points = document.getElementsByClassName('point');
  
    var style = points[index].getAttribute("style");
    style = style + 'background-color:green;';
    points[index].setAttribute("style", style);
  };
  
  function getPoints() {
    var wedges = 12.0;
    var radius = 300.0;
    var angle = 360.0 / wedges;
  
    var body = document.getElementsByTagName('body')[0];
    var map = document.getElementsByName('graphMap')[0];
  
    var out_points = [];
    var in_points = [];
  
    for (i = 0; i &lt; wedges; i++) {
      out_points.push(
          [
            getX((radius + 10), angle, i), 
            getY((radius + 10), angle, i) 
          ]
          );
  
      in_points.push(
          [
            getX((radius - 100), angle, i), 
            getY((radius - 100), angle, i) 
          ]
          );
    }
  
    for (i = 0; i &lt; wedges; i++) { (function(i) {
      body.innerHTML +=  '&lt;div class="point" style="top:' + out_points[i][1] + 'px;left:' + out_points[i][0] + 'px;background-color:blue;"&gt;&lt;/div&gt;';
      body.innerHTML +=  '&lt;div class="point" style="top:' + in_points[i][1] + 'px;left:' + in_points[i][0] + 'px;background-color:blue;"&gt;&lt;/div&gt;';
      var mapHTML = '&lt;area shape="poly" coords="'; 
      mapHTML += out_points[i].join() + ','; 
      mapHTML += out_points[(i+1) % wedges].join() + ','; 
      mapHTML += in_points[(i+1) % wedges].join() + ','; 
      mapHTML += in_points[i].join() + '" href="#" ';
      mapHTML += 'alt="wedge' + i + '" title="wedge' + i + '"'
      mapHTML += ' onclick="changePointColor(' + i + ')"' 
      mapHTML += '&gt;' + "\n";
      map.innerHTML += mapHTML;
    })(i);}
  
    console.log(map)
    console.log(map.innerHTML);
  };
  </code></pre>
  
  <p>Here is <a href="http://jsfiddle.net/EbAL4/1/" rel="nofollow">the fiddle</a>.</p>
  
  <p>The problem seems to be that the innerHTML of the map remains unchanged after getPoints() is run. I log the innerHTML of the map element at the end of the getPoints() function:</p>
  
  <pre><code>// console.log(map.innerHTML) output
  
  &lt;area shape="poly" coords="298,608,453,566,398,471,298,498" href="#" alt="wedge0" title="wedge0" onclick="changePointColor(0)"&gt;
  &lt;area shape="poly" coords="453,566,566,453,471,398,398,471" href="#" alt="wedge1" title="wedge1" onclick="changePointColor(1)"&gt;
  &lt;area shape="poly" coords="566,453,608,298,498,298,471,398" href="#" alt="wedge2" title="wedge2" onclick="changePointColor(2)"&gt;
  &lt;area shape="poly" coords="608,298,566,143,471,198,498,298" href="#" alt="wedge3" title="wedge3" onclick="changePointColor(3)"&gt;
  &lt;area shape="poly" coords="566,143,453,30,398,125,471,198" href="#" alt="wedge4" title="wedge4" onclick="changePointColor(4)"&gt;
  &lt;area shape="poly" coords="453,30,298,-12,298,98,398,125" href="#" alt="wedge5" title="wedge5" onclick="changePointColor(5)"&gt;
  &lt;area shape="poly" coords="298,-12,143,30,198,125,298,98" href="#" alt="wedge6" title="wedge6" onclick="changePointColor(6)"&gt;
  &lt;area shape="poly" coords="143,30,30,143,125,198,198,125" href="#" alt="wedge7" title="wedge7" onclick="changePointColor(7)"&gt;
  &lt;area shape="poly" coords="30,143,-12,298,98,298,125,198" href="#" alt="wedge8" title="wedge8" onclick="changePointColor(8)"&gt;
  &lt;area shape="poly" coords="-12,298,30,453,125,398,98,298" href="#" alt="wedge9" title="wedge9" onclick="changePointColor(9)"&gt;
  &lt;area shape="poly" coords="30,453,143,566,198,471,125,398" href="#" alt="wedge10" title="wedge10" onclick="changePointColor(10)"&gt;
  &lt;area shape="poly" coords="143,566,298,608,298,498,198,471" href="#" alt="wedge11" title="wedge11" onclick="changePointColor(11)"&gt;
  </code></pre>
  
  <p>Really at my wits ends on this one. I suppose I've made an obvious javascript or html faux pas. Looking forward to learning my mistake.</p>