XML : Loading XML data into JavaScript and changing div colors with the XML data

This is homework question requiring that I use color information collected in a XML file to change the color of twenty divs with a button. I have approached this by creating a single class of divs in the html document, loading the XML data into a Javascript file and iterating through the XML. I think the problem is that I am incorrectly loading the XML document into Javascript? I posted sections of the code as follows (I only posted one part of the css so it wouldn't be so long)

  <div class="div" id="two"><h2>2</h2></div>      <div class="div" id="one"><h1>1<br><br> <br>REQUIREMENT #1</h1></div>  <div class="div" id="three"><h2>3</h2></div>  <div class="div" id="four"><h2>4</h2></div>  <div class="div" id="five"><h2>5</h2></div>  <div class="div" id="six"><h2>6</h2></div>  <div class="div" id="seven"><h2>7</h2></div>  <div class="div" id="eight"><h2>8</h2></div>  <div class="div" id="nine"><h2>9</h2></div>  <div class="div" id="ten"><h2>10</h2></div>  <div class="div" id="eleven"><h2>11</h2></div>  <div class="div" id="twelve"><h2>12</h2></div>  <div class="div" id="thirteen"><h2>13</h2></div>  <div class="div" id="fourteen"><h2>14</h2></div>  <div class="div" id="fifteen"><h2>15</h2></div>  <div class="div" id="sixteen"><h2>16</h2></div>  <div class="div" id="seventeen"><h2>17</h2></div>  <div class="div" id="eighteen"><h2>18</h2></div>  <div class="div" id="nineteen"><h2>19</h2></div>  <div class="div" id="twenty"><h2>20</h2></div>  </div>  <input type="button" value="changediv" onclick="changeColors()">      <?xml version="1.0" encoding="UTF-8"?>  <divcolors>  <div name ="one">  <color>aliceblue</color>  </div>  <div name ="two">  <color>aquamarine</color>  </div>  <div name="three">  <color>coral</color>  </div>  <div name="four">  <color>cornflowerblue</color>  </div>  <div name="five">  <color>cyan</color>  </div>  <div name="six">  <color>darkgray</color>  </div>  <div name="seven">  <color>darkolivegreen</color>  </div>  <div name="eight">  <color>darkviolet</color>  </div>  <div name="nine">  <color>deepskyblue</color>  </div>  <div name="ten">  <color>forestgreen</color>  </div>  <div name="eleven">  <color>honeydew</color>  </div>  <div name="twelve">  <color>lightsalmon</color>  </div>  <div name="thirteen">  <color>lightsteelblue</color>  </div>  <div name="fourteen">  <color>maroon</color>  </div>  <div name="fifteen">  <color>mediumspringgreen</color>  </div>  <div name="sixteen">  <color>mediumturquiose</color>  </div>  <div name="seventeen">  <color>mistyrose</color>  </div>  <div name="eighteen">  <color>oldlace</color>  </div>  <div name="nineteen">  <color>olive</color>  </div>  <div name="twenty">  <color>azure</color>  </div>  </divcolors>    an example of the css:  #one {  border-radius: 300px;  background: blue;  position: absolute;  float: left;  top: 550px;  width: 300px;  height: 300px;  margin-left:  500px;  margin-top: 5px;  z-index: 4;  transition-duration: 1s;  transition-timing-function: cubic-bezier (.5,-5,.3,1.3), ease;  transition-delay: .2s;    }    JavaScript:    var xhttp = new XMLHttpRequest();  xhttp.onreadystatechange = function() {  if (xhttp.readyState == 4 && xhttp.status == 200) {      changeColors(xhttp);  }  };  xhttp.open("GET", "divcolors.xml", true);  xhttp.send();    function changeColors(xml) {  var xmlDoc = xml.responseXML;  var colorCrap= "";  var colorColor = xmlDoc.getElementsByTagName("color");  var i;  var x = document.getElementsByClassName("div");  for (i=0; i<colorColor.length;i++){      colorCrap += colorColor[i].childNodes[0].nodeValue;    }  x[i].style.backgroundColor = colorCrap;  }