这是一个功课问题，要求我使用XML文件中收集的颜色信息，用一个按钮更改二十个div的颜色。我已经通过在html文档中创建单个div类，将XML数据加载到Javascript文件并迭代XML来解决这个问题。我认为问题是我错误地将XML文档加载到Javascript中？我发布了以下代码部分（我只发布了css的一部分，所以它不会那么长）
<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>
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;
}
答案 0 :(得分：0)
你关闭了，但没有雪茄。您需要在XML中选择正确的元素并以正确的方式获取值。有几种方法可以解决这个问题，在这里我只是根据你的方法做到了。
我制作了一个可以从中受到启发的工作演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XML Color</title>
<script src="script.js"></script>
</head>
<body>
<div>
<div class="div" id="one"><h1>1<br><br> <br>REQUIREMENT #1</h1></div>
<div class="div" id="two"><h2>2</h2></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="setTheColors()">
</body>
</html>
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();
}
<?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>