change an elements style attribute with an xml file using javascript

Question

I am trying to take color hex codes from an xml file and use the data to change the color of 20 divs. I have been quite lost and tried to pick apart a snippet of code i found and use for myself. I am getting console error cannot read property "innerhtml".

what am i doing wrong here?

html

<div class='container'>
        <div class='blah' id='1'>hello</div>
        <div class='blah' id='2'>hello</div>
        ........
        <div class='blah' id='19'>hello</div>
        <div class='blah' id='20'>hello</div>
    </div>
    <input type="button" value="changediv" onclick="setTheColors()">

xml

<?xml version="1.0" encoding="UTF-8"?>
<divcolors>
    <div name ="1"><color>#94fd05</color></div>
    <div name ="2"><color>#c8a522</color></div>
    ..........
    <div name ="19"><color>#66b013</color></div>
    <div name ="20"><color >#223fc5</color></div>
</divcolors>

javascript

function changeColors(xml) {
    var xmlDoc = xml.responseXML;
    var colorColor = xmlDoc.getElementsByTagName("div");
    for (var i = 0; i < colorColor.length; i++){
        var current = colorColor[i].getAttribute('name');
        var theDiv = document.getElementById(current);
        theDiv.style.backgroundColor = colorColor[i].childNodes[0].nextSibling.innerHTML;
    }
}

function setTheColors(){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            changeColors(xhttp);
        }
    };
    xhttp.open("GET", "divcolors.xml", true);
    xhttp.send();
}

This line of code is giving me the console error:

theDiv.style.backgroundColor = colorColor[i].childNodes[0].nextSibling.innerHTML;

quite lost on how to get this to work. have tried numerous things and nothing has worked. The only other thing I could get the code to do was not give me any console errors but do nothing at the same time.

Answer 1

Leave out that "nextSibling"!

 var xml = '<divcolors><div name ="1"><color>#94fd05</color></div><div name ="2"><color>#c8a522</color></div><div name ="19"><color>#66b013</color></div><div name ="20"><color >#223fc5</color></div></divcolors>'; var changeColors = function() { var parser = new DOMParser(); var xmlDoc = parser.parseFromString(xml, "text/xml"); var colorColor = xmlDoc.getElementsByTagName("div"); for (var i = 0; i < colorColor.length; i++) { var current = colorColor[i].getAttribute('name'); var theDiv = document.getElementById(current); theDiv.style.backgroundColor = colorColor[i].childNodes[0].innerHTML; } } 

 <div class='container'> <div class='blah' id='1'>hello</div> <div class='blah' id='2'>hello</div>........ <div class='blah' id='19'>hello</div> <div class='blah' id='20'>hello</div> </div> <input type="button" value="changediv" onclick="changeColors()">